Animating the UI

Hello, I'm new on unity and I want to animate the menu when it appear. There is my menu, and the animation that I wanna make. I try using mask but it did'nt work.
Thank to help me and sorry for the bad english, I'm french.

 

How did you try mask? Give us some info please

 

@Slave23 you have a few ways of tackling that.
As this is a pretty simple animation you could do it using a script or using an AnimationController with an Animation for example.
Following are two examples on how to achieve this using those two ways:

Using Animation:


Using Script:


Following the script I created for this:

Code (CSharp):

1. using System.Collections;
2. using UnityEngine;
3.  
4. public class OpenMenu : MonoBehaviour
5. {
6.     [SerializeField]
7.     [Tooltip("The time it takes to open the menu in seconds")]
8.     private float openingTime = 1f;
9.  
10.     private Vector3 startSize;
11.     private Vector3 endSize;
12.  
13.     /// <summary>
14.     /// Executed at the first frame
15.     /// Saves the scale of the menu (should have a zero value of x) the script is on into startSize
16.     /// and sets endSize based on it to later animate from startSize to endSize
17.     /// </summary>
18.     private void Start() {
19.         startSize = transform.localScale;
20.         endSize = new Vector3(1, startSize.y, startSize.z);
21.     }
22.  
23.     /// <summary>
24.     /// Starts the coroutine which opens the menu
25.     /// </summary>
26.     public void Open() {
27.         StartCoroutine(OpenCoroutine());
28.     }
29.  
30.     /// <summary>
31.     /// Animates the size of the menu over openingTime seconds from startSize to endSize using Vector3.Lerp
32.     /// </summary>
33.     /// <returns></returns>
34.     private IEnumerator OpenCoroutine() {
35.         float elapsedTime = 0f;              
36.         while (elapsedTime < openingTime) {          
37.             transform.localScale = Vector3.Lerp(startSize, endSize, elapsedTime / openingTime);
38.             elapsedTime += Time.deltaTime;
39.             yield return null;
40.         }
41.         transform.localScale = endSize;
42.     }
43. }

If you have any questions, please do not hesitate to ask.

Greetings
Roy

 

Wow ! Thank you for the time you spent for me but I had already tested this by animating and it didn't work since my image isn't a solid color. It's look pretty anwful :

And for the mask, I try like this but the problem are I can start the mask at the center of the image and if I set the alpha to 0 all my image is gone :/

 

In that case you can animate the Rect size instead of the object size.

Here an example:


If you need help on how to animate that, please ask.