Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to achieve track sliding effect in Unity ScrollRect". In daily operation, I believe many people have doubts about how to achieve track sliding effect in Unity ScrollRect. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to achieve track sliding effect in Unity ScrollRect". Next, please follow the editor to study!

The following is written according to the Unity 2020.1.01f version

1. Purpose

When you encounter a sliding list that needs to achieve trajectory sliding, the usual way is to calculate the Bezier curve to get the trajectory, but I think it is too troublesome to calculate the Bezier curve. Maybe there is no easier way.

2. Thinking

Track sliding can be divided into two situations:

The first is that trajectory sliding is a relatively simple horizontal (or vertical) sliding, in which the track does not meander and does not involve the overlap between list lattices. at this time, the Y axis (or X axis) can be set between zones to achieve the effect of lattice sliding along the track.

For example, a track is wavy, where the number of track points can be increased indefinitely, and the more points, the smoother the track, but the more performance it consumes:

Like this, a wavy trajectory can be used to record the position and order of each point with a Vector list, and then according to the position of each grid, it is cyclically determined from small to large, for example, lattice 3 is between pos_5 and pos_6, so the interval of the third grid is 5, and then through the subtraction of pos_5 and pos_6 points, a vector vector from pos_5 to pos_6 is obtained. The transverse distance distanceX1 of pos_5 and pos_6 is obtained by vector3.distance function, and then the transverse distance distanceX2 between pos_5 and lattice 3 is obtained again through vector3.distance function. Then, the position of grid 3 = the position of pos_5 + distanceX2 / distanceX1 * vector, and then set the position back to  .

The second is more complex trajectory sliding, such as winding tracks, which also include hierarchical relationships.

For example, a track is winding, and the more track points, the smoother the curve and the more performance it consumes:

For a winding trajectory like this, the first method cannot be used, because in some locations, there are multiple Y values corresponding to an X value, and it is impossible to distinguish which Y value is currently needed, so another method is needed.

By getting all the track points, we can calculate the distance between every two adjacent track points, and determine which interval the grid should be in by the distance.

For example, if the position of grid 3 is 95, and the distance between pos_1 and pos_2 is 50, the distance between pos_1 and pos_3 is also 50, then the total distance from pos_1 to pos_3 is 100, so grid 3 should be between pos_2 and pos_3. Next, calculate the actual position, because both the X and Y axes of the grid will change, and it is also impossible to use the first method to calculate the position of the lattice. It is necessary to subtract the sum of the distance from the previous interval by the position of the lattice. In this example, the distance from pos_1 to pos_2 is subtracted from the position of lattice 3, that is, 95-50 = 45, and the ratio ratio is obtained by dividing the remaining distance by the distance of the current interval. And then the vector vector of pos_2 pointing to pos_3 is obtained by subtracting the two current interval points, then the position of grid 3 is the position of pos_2 + ratio * vector.

Finally, there is the question of hierarchy, that is, which grid obscures which grid, usually the back grid obscures the front grid, if you need to block the grid behind the front, you only need to dynamically modify the level. Unity provides this function: Transform.SetAsFirstSibling ()

In practice, I found that after using this method, the length of content is sometimes too long and sometimes too short, so it is necessary to determine the number of grids and set the correct length of content.

Note: the above are the most basic ideas, because the content node is changed when sliding, and the position of the grid is actually unchanged or set by the code, so the width and height of the scrollrect and the sliding value of the content node also need to be considered in the actual code (that is, the posX value, which will change when sliding).

3. Custom implementation track sliding using System.Collections.Generic;using UnityEngine;using UnityEngine.UI; [RequireComponent (typeof (ScrollRect))] public class CurveSliding: MonoBehaviour {public Transform posListRoot; public float contentwidth; / / the actual length of content that must be set by yourself public bool isChangeHierarchy = false; private ScrollRect scrollRect; private RectTransform content; private List posTransformList = new List (); private List item_transformList = new List (); private List posX_List = new List () Private List distanceList = new List (); private float scrollRectWidth; private float scrollRectHeight; private float posTotalDistance; private float spacing = 0; private void Start () {scrollRect = GetComponent (); content = scrollRect.content.transform as RectTransform; HorizontalLayoutGroup contentLayoutGroup = content.GetComponentsInChildren (true) [0]; if (contentLayoutGroup! = null & & contentLayoutGroup.name = = content.name) {spacing = contentLayoutGroup.spacing } scrollRectWidth = scrollRect.GetComponent (). SizeDelta.x; scrollRectHeight = scrollRect.GetComponent (). SizeDelta.y; for (int I = 0; I

< content.childCount; i++) { RectTransform item_transform = content.GetChild(i) as RectTransform; if (item_transform.gameObject.activeInHierarchy) { item_transformList.Add(item_transform); posX_List.Add(item_transform.localPosition.x); } else { continue; } } float totalDistance = 0; for(int i = 0;i < posListRoot.childCount;i++) { Transform posTransform = posListRoot.GetChild(i); if (i >

0) {Transform previousPosTransform = posListRoot.GetChild (I-1); totalDistance + = Vector3.Distance (posTransform.localPosition, previousPosTransform.localPosition);} posTransformList.Add (posTransform); distanceList.Add (totalDistance);} posTotalDistance = distanceList [distanceList.Count-1]; content.sizeDelta = new Vector2 (contentwidth, content.sizeDelta.y) OnValueChange (Vector2.zero); scrollRect.onValueChanged.AddListener (OnValueChange);} public void OnValueChange (Vector2 vector) {for (int I = 0 I)

< item_transformList.Count;i++) { float localPosX = posX_List[i]; float posX = localPosX + content.anchoredPosition.x; //如果当前节点的位置 - content的X轴偏移值 >

The width of the sliding list indicates that the current item is outside the visual range of if (posX > posTotalDistance + 200 | | posX

< 0) { continue; } int index = -1; foreach(var totalDistance in distanceList) { if(posX < totalDistance) { break; } else { index++; } } //如果index+1小于位置列表的数量，则其在位置区间内，否则应该在位置区间外 if (index + 1 < posListRoot.childCount && index + 1 >

0) {float ratio = (posX-distanceList [index]) / (distanceList [index + 1]-distanceList [index]); Vector3 newPos = posTransformList [index] .localPosition-ratio * (posTransformList [index] .localPosition-posTransformList [index + 1] .localPosition); item_ transformList.localPosition = new Vector3 (newPos.x + scrollRectWidth/2-content.anchoredPosition.x,-scrollRectHeight / 2 + newPos.y, 0) } else if (index = posListRoot.childCount-1) {if (I < 1) {continue;} RectTransform previousItem_RectTransform = item_ transformList [I-1] Item_ transformList [I] .localPosition = new Vector3 (previousItem_RectTransform.localPosition.x + spacing + previousItem_RectTransform.sizeDelta.x/2 + item_ transformList [I] .sizeDelta.x / 2,-scrollRectHeight / 2 + posListRoot.GetChild (posListRoot.childCount-1). LocalPosition.y, 0);} if (isChangeHierarchy) {item_ transformList [I] .SetAsFirstSibling () 4. Advantages and disadvantages of the two methods

1) neither method can use the sorting component, because the sorting component controls the location of the dead grid and cannot be modified through code

2) the second method is more complex and consumes more performance than the first method, but can achieve more complex effects.

3) the second method needs to set the length of conten, that is, the number of grids cannot be changed dynamically, which is a major disadvantage.

5. Final effect

The first kind:

The second kind:

At this point, the study of "how to achieve trajectory sliding effect in Unity ScrollRect" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.