Using DOTween to animate the 'Opacity' property in a VisualElement

Question

For anyone who's familiar with 'DOTween' and/or UIElements, I'm trying to tween the opacity of a VisualElement from 0 -> 1, 1 -> 0 and it doesn't seem to be working. Is this because of my code, DOTween, or because this is not yet supported in UIElements? This is the function I made:

 void MenuTransition(VisualElement menu, float t)
 {
     float opacity = menu.style.opacity.value;
     if(menu.style.opacity.value == 0)
     {
         DOTween.To(() => opacity, x => opacity = x, 1f, t);
         menu.focusable = true;
     }
     else if(menu.style.opacity.value == 1)
     {
         menu.focusable = false;
         DOTween.To(() => opacity, x => opacity = x, 0f, t);
     }
 }

Answer 1

Answer by andrew-lukasik · Dec 01, 2021 at 12:10 PM

UI Toolkit ships with a dedicated tweening api

(experimental but works fine at the time of writing this post)

ui toolkit elements tweening easing

 using UnityEngine;
 using UnityEngine.UIElements;
 
 public class RuntimeUiAnimator : MonoBehaviour
 {
     [SerializeField] UIDocument _uiDocument = null;
     void OnEnable ()
     {
         var ROOT = _uiDocument.rootVisualElement;
 
         ROOT.Query("animated").ForEach( (next) => {
             var zeroToOne = next.experimental.animation
                 .Start( 0f , 1f , 1000 , (ve,value) => ve.style.opacity = value )
                 .Ease( UnityEngine.UIElements.Experimental.Easing.InOutQuad )
                 .KeepAlive();
             var oneToZero = next.experimental.animation
                 .Start( 1f , 0f , 1000 , (ve,value) => ve.style.opacity = value )
                 .Ease( UnityEngine.UIElements.Experimental.Easing.InOutQuad )
                 .KeepAlive();
             var idle = next.experimental.animation
                 .Start( 1f , 1f , 1000 , (ve,value) => {} )
                 .KeepAlive();
             
             zeroToOne.OnCompleted( ()=> idle.Start() );
             idle.OnCompleted( ()=> oneToZero.Start() );
             oneToZero.OnCompleted( ()=> zeroToOne.Start() );
             
             zeroToOne.Start();
         } );
     }
 }

gif-01122021-13-09-16.gif (16.0 kB)

Add comment · Show 2 · Share

danielmahon · Dec 01, 2021 at 01:56 PM 1

Share

If this was in response to my recent comment (which I deleted shortly after posting because it turned out to be user error) thanks for responding.

DOTween seems to work fine for animating UI elements, including opacity. USS transitions works as well as does the experimental UI. Though DOTween just makes animation composition easier.

I got stuck for awhile because I had accidentally added a USS transition to my element via UI Builder. So it was interfering with DOTween. Once I removed it worked fine.

andrew-lukasik danielmahon · Dec 01, 2021 at 02:19 PM 0

Share

Yes, since this thread received a small ping from you so I thought I just may as well update my answer to point ppl toward built-in solution that will hopefully become something easier to start toying with.

Oh I didn't even noticed that USS transitions became available already, thx.

Using DOTween to animate the 'Opacity' property in a VisualElement

1 Reply

Your answer

Follow this Question

Related Questions