Search Unity

Best practices for staggering UI animation?

Discussion in 'UGUI & TextMesh Pro' started by IanNicolades, Oct 20, 2020.

  1. IanNicolades

    IanNicolades

    Joined:
    Oct 1, 2016
    Posts:
    40
    I've recently begun digging into Unity's built in animation system for UI. I'm pretty old-school, and am looking for the best way of creating staggered animation curves: https://www.shawnhargreaves.com/blog/transitions-part-one-the-importance-of-curves.html

    This bit of code at the bottom perfectly encapsulates the effect I need:
    Code (CSharp):
    1. const float overlap = 0.5f;
    2. int numEntries = menuEntries.Count;
    3.    
    4. float transitionOffset = MathHelper.Clamp((TransitionPosition - (1 - overlap) * i / numEntries) / overlap, 0, 1);
    5.  
    6. position.X = MathHelper.SmoothStep(100, -200, transitionOffset);
    7. scale += MathHelper.SmoothStep(0, 4, transitionOffset);
    8. color = new Color(color.R, color.G, color.B, (byte)((1 - transitionOffset) * 255));
    In other words, we evaluate a curve using the current scene transition time, offset by the menu entry's index - so that a list of buttons would transition in in a staggered fashion, instead of all at once.

    I could brute force this by creating a custom animation clip for every single button, but that does not seem scalable or fun to work with! :)

    I believe the best way of doing this in Unity's system would be to set a Property of the item's index, and then somehow use that to influence how the current animation curve is evaluated. But I am stuck on what the best practice would be to do this in unity-land in a scalable way going forward and how to translate that idea into a functional Unity animation element. Any pointers would be appreciated!