Search Unity

Animation of style changes?

Discussion in 'UI Toolkit' started by Claytonious, Aug 11, 2020.

  1. Claytonious

    Claytonious

    Joined:
    Feb 16, 2009
    Posts:
    904
    When we change the class or styles of a visual element at runtime, is there any support out of the box for animating the changes in styles such as colors instead of having them instantly change?

    I gather from some older forum posts that this won't be coming until next year but I wanted to explicitly confirm.

    If it's not available, then how would you recommend that we implement this ourselves? Can we enumerate the styles within a class and then apply this kind of animation ourselves based on those? For example, if I know that I want to change a visual element's class to "foo", is there existing API for me to lookup the class definition of "foo" and enumerate its styles so that I can animate the things which are changing programmatically?

    Thanks!
     
    Claytonious, Aug 11, 2020
    #1

  2. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,231
    We don't have public APIs to do this and we don't plan to introduce such APIs soon because we'd rather properly implement animation and transitions support instead.

    For now, you have to animate each style property transition entirely in C#. You can use the built-in UI Toolkit scheduler to update the values incrementally, as I partially described here:
    https://forum.unity.com/threads/animation-via-code-examples.948161/

    We also have an experimental transitions C# API, documented here:
    https://docs.unity3d.com/Packages/c...ments.Experimental.ITransitionAnimations.html
    and some example code here:
    https://github.com/Unity-Technologi...ter/Assets/Examples/Editor/E17_Transitions.cs
     
    uDamian, Aug 11, 2020
    #2

  3. MousePods

    MousePods

    Joined:
    Jul 19, 2012
    Posts:
    811
    I have a quick question about this. Will the animations include:

    1. Events such as onStart, onComplete, onStepComplete.
    2. The ability to call PlayBackwards, PlayForward, Rewind, Restart.
    3. Loops
    4. The ability to make a Sequence of multiple animations. sequence.append(animation1),
    sequence.append(animation2), sequence.join(animation3) and then call sequence.Play().

    or is this all going to be apart of the experimental transition C# API and the animation/transitions are only going to be apart of USS.

    Just to clarify, is the experimental transition C# API for animations you want to call when you click a button or for more complex animations and the animation/transitions support (which I am assuming is for USS?) is going to be for UI that you :hover or are just constantly animating.

    Also, I noticed in your easing documentation: https://docs.unity3d.com/Packages/c...ityEngine.UIElements.Experimental.Easing.html that there isn't the ease type inExpo, outExpo, InOutExpo. Will this be added or can you use a custom Animation Curve?

    Thanks!
     
    Last edited: Aug 11, 2020
    MousePods, Aug 11, 2020
    #3

  4. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,231
    We're talking about a point a bit too far in the future to give specifics, but all the above are use cases we do eventually want to address.

    Our current plans revolve around CSS-transitions which, in our internal prototypes, will also send onStart, onComplete, etc. events. And while we use CSS-like syntax and properties for transitions, they would be implemented on top of the same tweening C# API I mentioned above, which itself will expand and move out of Experimental at some point (though likely after we have CSS transitions.

    Further in the future are CSS animations (for things like loops) and this is a bit too far to add much more detail right now.

    We are also planning to make it easier to expose individual elements in your UI to the GameObject world so you can use the existing Timeline and other animation features of Unity to create more complicated sequences.
     
    uDamian, Aug 11, 2020
    #4
    Zelgadis87 and MousePods like this.

  5. MousePods

    MousePods

    Joined:
    Jul 19, 2012
    Posts:
    811
    MousePods, Aug 11, 2020
    #5

  6. uMathieu

    uMathieu

    Unity Technologies

    Joined:
    Jun 6, 2017
    Posts:
    398
    The missing expo are an oversight. Since the c# animations just take a Func<float, float> method, nothing limits you from adding them on your end.

    Code (CSharp):
    1.  
    2. public static float InExpo(float t){
    3.     return t  < 0.00001f ? 0 : Mathf.Pow(2, 10 * t - 10);
    4. }
    5.  
    6. // or sampling from a custom curve:
    7. public float MyCurve(float t){
    8.     return myAnimationCurve.Evaluate(t);
    9. }
    10.  
     
    uMathieu, Aug 11, 2020
    #6
    MousePods likes this.

  7. MousePods

    MousePods

    Joined:
    Jul 19, 2012
    Posts:
    811
    Ah, okay thanks!
     
    MousePods, Aug 11, 2020
    #7