Unity3D problem: EnhanceScollView: select the role 3D circular scrolling effect, and unity3dscrollview

Unity3D problem: EnhanceScollView: select the role 3D circular scrolling effect, and unity3dscrollview

Requirement

• 3D effect (2D material) selected role Effect
• Scroll ensures hierarchy, scaling ratio, and spacing follow
• Cyclic scrolling
• This interface is usually used by games (it seems that there are many)

How to Implement

Key Technical Points

1. How to control the interval (position), zoom ratio, and smooth difference between items
2. How to correctly display the hierarchical relationship of items (the level near the screen is high)
3. How to Implement Circular scrolling

The following describes the methods used in the current Demo.
Speaking of the core of the implementation, we need to know that the one provided in Unity3D isAnimationCurveThis is not only a component that can be used by art on the surface, but also a simple concept of animation curves. Of course, it is an animation curve, but we can assign different meanings to AnimationCurve, you can use Curve to implement different functions,(AnimationCurve defines a change trend or curve. at different time points, we can obtain the y-axis information corresponding to the curve at the current time point. This information can be the height of the role jump, a coefficient of model scaling, the length of the camera distance to the target, the current mood value of a role, and so on. The curve can represent a lot of meaning)
If you have never used AnimationCurve, you can go to the official website to see how to use it.
The following is a simple example.AnimationCurveSome functions that can be completed (some scenarios have been introduced above)

1. 2D role jump
2. Camera Movement
3. Role mood Index
4. Scaling Factor
5. Distance Coefficient
6. ......

We also give different meanings to AnimationCurve to achieve our core goals (control the displacement, control the scaling, and control the hierarchy)

Control displacement, scaling (key to 3D effects), and excessive animation smoothness of Difference values

1. Create two AnimationCurve. One is scaleAnimationCurve and the other is positionXAnimationCurve, which respectively control scaling and displacement.
2. Time pipeline control (we can set the corresponding time stream position for all items. Every time we move the time pipeline, we can obtain the scaling coefficient corresponding to the current pipeline from the two curves, displacement coefficient, and then set the item's displacement and scaling)
3. How to Make an animation (this is actually a simple difference processing of the time pipeline, and the flow value can reach the target value at a certain time)

Below are two curves and specific implementations:

/// <Summary> /// the scaling curve simulates the current scaling value. /// </summary> private float GetScaleValue (float sliderValue, float added) {float scaleValue = scaleCurve. evaluate (sliderValue + added); return scaleValue;} // <summary> // simulate the current X axis position using the position curve /// </summary> private float GetXPosValue (float sliderValue, float added) {float evaluateValue = positionCurve. evaluate (sliderValue + added) * posCurveFactor; return evaluateValue;} Public void UpdateEnhanceScrollView (float fValue) {for (int I = 0; I <scrollViewItems. count; I ++) {EnhanceItem itemScript = scrollViewItems [I]; float xValue = GetXPosValue (fValue, dHorizontalValues [itemScript. scrollViewItemIndex]); float scaleValue = GetScaleValue (fValue, dHorizontalValues [itemScript. scrollViewItemIndex]); itemScript. updateScrollViewItems (xValue, yPositionValue, scaleValue );} Void Update () {currentDuration + = Time. deltaTime; if (currentDuration> duration) {// After the Update is complete, set the object of the selected item to currentDuration = duration; if (centerItem! = Null) centerItem. SetSelectColor (true); if (preCenterItem! = Null) preCenterItem. setSelectColor (false); canChangeItem = true;} SortDepth (); float percent = currentDuration/duration; horizontalValue = Mathf. lerp (originHorizontalValue, horizontalTargetValue, percent); UpdateEnhanceScrollView (horizontalValue );}

Control Level

Only the correct hierarchical control can ensure "don't wear the Gang". As mentioned above, you can also useAnimationCurveMake a hierarchical curve. The depth or level of the item should be in the current item time. The demo adopts a rough list sorting method, according to the distance between each item and the screen, it is actually the scale coefficient. It is also a problem to determine which item is in front and which is behind it. If the distance is the same, there may be a possibility of mutual item fights (this can be controlled by controlling scaleCurve)
The UITexture control level used in this Demo (the principle is the same in any other way, but the processing object is different. It is implemented by mesh, that is, the Z axis, and so on)
The specific implementation is as follows:

Public void SortDepth () {textureTargets. sort (new CompareDepthMethod (); for (int I = 0; I <textureTargets. count; I ++) textureTargets [I]. depth = I ;}/// <summary> // used for hierarchical comparison interface /// </summary> public class CompareDepthMethod: IComparer <UITexture> {public int Compare (UITexture left, UITexture right) {if (left. transform. localScale. x> right. transform. localScale. x) return 1; else if (left. transform. localScale. x <right. transform. localScale. x) return-1; else return 0 ;}}

Implement a rolling Loop

We use AnimationCurve to say circular scrolling. There are three modes for a congenital animation curve: pingpong, loop, and clamp,What we need is LOOP. No error.,This is the key point of the rolling cycle (Our scaling curve, the displacement coefficient curve is simulated from 0 to 1, if we continue to add the time flow value forward, so when we enter the next curve, all items will in turn sample the curve value, and we will be able to skillfully achieve the cyclic effect (scaling coefficient, displacement coefficient ))If you do not understand it, you can set an animation as follows:

The Code only needs to know, if you click an Item to move the item to the center, the corresponding time stream should go forward or backward

/// <Summary> /// obtain the number of factor intervals to be moved to the center of the Item. /// </summary> private int GetMoveCurveFactorCount (float targetXPos) {int centerIndex = scrollViewItems. count/2; for (int I = 0; I <scrollViewItems. count; I ++) {float factor = (0.5f-dFactor * (centerIndex-I); float tempPosX = positionCurve. evaluate (factor) * posCurveFactor; if (Mathf. abs (targetXPos-tempPosX) <0.01f) return Mathf. abs (I-centerIndex);} return-1 ;}

Notes

1. Make the curve and ensure that the 0-1 timeline is filled, so that there will be no deviation during cyclic processing.
2. Yes. If you try this method, check the parameters in the Demo carefully)

The NGUI used in this Demo, although I have never used UGUI, I think any interface Tools can be implemented through this method, because the same thing in common is only hierarchical processing, and there is a difference in scaling processing.

Effect




Improvement Objectives

There are still many areas for improvement in this project, and it will take time to continue to improve.

• Supports editing in Editor mode. You can view the effect without running it (this should be the most critical function)
• Supports moving an even number of items
• Supports Drag operations
• Support DragScrollView and CenterOnChild features similar to NGUI
• Optimize the hierarchical setting algorithm efficiency of each Item
• Optimizes the efficiency of Scaling algorithms by updating the position of each Item

We look forward to version 1.1 ~

Demo address

It contains NGUI3.6.6, which is a little big
Project address: http://download.csdn.net/detail/fredomyan/8908891

APK test installation address: http://pan.baidu.com/s/1bnfPasJ

Summary

All content has been described. If this article can help you get a simple inspiration for friends who have seen the ending, please support it ~, If there is an error in the text or the description is unclear, please correct it and share the learning. The best way is to download the Demo directly and check the setting parameters of the logical and animation curves.

You are welcome to reprint it. Please indicate the source ~

By drifting swallow (Andy)

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.