Search Unity

  1. Unity 2019.2 is now released.
    Dismiss Notice

Animate UI Text with Mecanim (Fade In + Move to Camera)

Discussion in 'Animation' started by HelloUniverse, Aug 22, 2017.

  1. HelloUniverse

    HelloUniverse

    Joined:
    Aug 22, 2017
    Posts:
    3
    Hello Unity Community,

    I would like to animate an UI Text with Mecanim to get kind of a cinematic intro font effect. I want the text to fade in after some time while moving towards the camera and fade out again.

    How would I setup this behavior with the Mecanim mechanic ?

    Right now I got an Animation Controller attached to the UI Text with two states and one boolean variable "show". The "showText" state got one keyframe with text color alpha value of 0.7 and the "hiddenText" state has one keyframe with alpha value 0.0. If the "show" variable is true there will be the transition from "hiddenText" to "showText".

    That's my script to control the timing of this fadeIn/fadeOut animation:

    Code (CSharp):
    1. public class SplashFontController : MonoBehaviour {
    2.  
    3.     private Animator animator;
    4.     int showHash = Animator.StringToHash("Show"); // Performace: use Hash instead of String to set Values
    5.     public float fadeInAfter = 5.0F;
    6.     public float fadeOutAfter = 10.0F;
    7.  
    8.     private void Awake()
    9.     {
    10.         animator = GetComponent<Animator>();
    11.     }
    12.  
    13.     private IEnumerator animateSplashText()
    14.     {
    15.         yield return new WaitForSeconds(fadeInAfter);
    16.         Debug.Log("Set Show = true");
    17.         animator.SetBool(showHash, true);
    18.         yield return new WaitForSeconds(fadeOutAfter - fadeInAfter);
    19.         Debug.Log("Set Show = false");
    20.         animator.SetBool(showHash, false);
    21.     }
    22.  
    23.     // Use this for initialization
    24.     void Start () {
    25.         Debug.Log("Start Font Coroutine...");
    26.         StartCoroutine(animateSplashText());
    27.     }
    28. }
    29.  
    Everything fine until now, but how to extend it to move the font towards the camera ? Will I need other states or maybe a second layer?
    It would be great if it would be possible to adjust the speed the font moves towards the camera.

    Thanks for any help!