Simple UI animation Fade in \ Fade out C#

As title i have to make this animation on different UI images . I want two animations that make square images appear and disappear at button click. Can someone help me? Thank You.

 

You can use coroutines to animate a fade in code, eg:

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.UI;
3. using System.Collections;
4.  
5. public class ImageFade : MonoBehaviour {
6.  
7.     // the image you want to fade, assign in inspector
8.     public Image img;
9.    
10.     public void OnButtonClick()
11.     {
12.         // fades the image out when you click
13.         StartCoroutine(FadeImage(true));
14.     }
15.  
16.     IEnumerator FadeImage(bool fadeAway)
17.     {
18.         // fade from opaque to transparent
19.         if (fadeAway)
20.         {
21.             // loop over 1 second backwards
22.             for (float i = 1; i >= 0; i -= Time.deltaTime)
23.             {
24.                 // set color with i as alpha
25.                 img.color = new Color(1, 1, 1, i);
26.                 yield return null;
27.             }
28.         }
29.         // fade from transparent to opaque
30.         else
31.         {
32.             // loop over 1 second
33.             for (float i = 0; i <= 1; i += Time.deltaTime)
34.             {
35.                 // set color with i as alpha
36.                 img.color = new Color(1, 1, 1, i);
37.                 yield return null;
38.             }
39.         }
40.     }
41. }
42.  

You can also create an Animator for your UI components and animate their fade, calling the animation in code whenever you want the fade to happen.

 

Thank you. So i already have two animation and i put them in the animator, i know how to call it in the code but the problem is that i need a "idle" one that is full transparent or maybe disable image. I have a code that works but there are some animation problems.

 

Thank for sharing dude!

 

Thanks man. Worked like a charm!

 

Cheers. Was easy to implement, even for a noob.

 

Here is my blink coroutine if you don't want be forced to fade 1 second:

Code (CSharp):

1. using UnityEngine.UI;
2.  
3.     [Header("Blink")]
4.     public Image m_BlinkImage;
5.     [Range(0.0f, 0.5f)]
6.     public float m_BlinkTime = 0.2f; //Time we stay at blink image
7.     [Range(0.1f, 0.5f)]
8.     public float m_BlinkTransitionTime = 0.2f; //Time for fading in and out (each one the same amount)
9.     private IEnumerator m_BlinkCoroutine = null;
10.  
11.   IEnumerator Blink(Vector3 antipodal)
12.     {
13.         //BLINK IN (fade from transparent to opaque)
14.         float alpha = 0;
15.         for (float i = 0; i <= m_BlinkTransitionTime; i += Time.deltaTime)
16.         {
17.             alpha = (i - 0) / (m_BlinkTransitionTime - 0); //Normalize value between 0 and 1
18.  
19.             // set color with i as alpha
20.             m_BlinkImage.color = new Color(m_BlinkImage.color.r, m_BlinkImage.color.g, m_BlinkImage.color.b, alpha);
21.             //print(m_BlinkImage.color);
22.             yield return null;
23.         }
24.         m_BlinkImage.color = new Color(m_BlinkImage.color.r, m_BlinkImage.color.g, m_BlinkImage.color.b, 1); // fix residual values
25.  
26.         //TELEPORT
27.         m_ShipController.Teleport(antipodal);
28.         yield return new WaitForSeconds(m_BlinkTime);
29.  
30.         //BLINK OUT (fade from opaque to transparent)
31.         for (float i = m_BlinkTransitionTime; i >= 0; i -= Time.deltaTime)
32.         {
33.             alpha = (i - 0) / (m_BlinkTransitionTime - 0); //Normalize value between 0 and 1
34.  
35.             // set color with i as alpha
36.             m_BlinkImage.color = new Color(m_BlinkImage.color.r, m_BlinkImage.color.g, m_BlinkImage.color.b, alpha);
37.             yield return null;
38.         }
39.         m_BlinkImage.color = new Color(m_BlinkImage.color.r, m_BlinkImage.color.g, m_BlinkImage.color.b, 0); // fix residual values
40.  
41.         //Close coroutine
42.         m_BlinkCoroutine = null;
43.  
44.     }

Hope it's useful

 

Thank you!

 

I don't know what I'm missing, why are you substracting zero from these values?

 

Code Improved C#

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.UI;
3. using System.Collections;
4.  
5.  
6. public enum FadeAction
7. {
8.     FadeIn,
9.     FadeOut,
10.     FadeInAndOut,
11.     FadeOutAndIn
12. }
13.  
14.  
15. public class ImageFadeImproved : MonoBehaviour
16. {
17.     [Tooltip("The Fade Type.")]
18.     [SerializeField] private FadeAction fadeType;
19.  
20.     [Tooltip("the image you want to fade, assign in inspector")]
21.     [SerializeField] private Image img;
22.  
23.  
24.     public void Start()
25.     {
26.         if (fadeType == FadeAction.FadeIn)
27.         {
28.  
29.             StartCoroutine(FadeIn());
30.  
31.         }
32.  
33.         else if (fadeType == FadeAction.FadeOut)
34.         {
35.  
36.             StartCoroutine(FadeOut());
37.  
38.         }
39.  
40.         else if (fadeType == FadeAction.FadeInAndOut)
41.         {
42.  
43.             StartCoroutine(FadeInAndOut());
44.  
45.         }
46.  
47.         else if (fadeType == FadeAction.FadeOutAndIn)
48.         {
49.  
50.             StartCoroutine(FadeOutAndIn());
51.  
52.         }
53.     }
54.  
55.     // fade from transparent to opaque
56.     IEnumerator FadeIn()
57.     {
58.  
59.         // loop over 1 second
60.         for (float i = 0; i <= 1; i += Time.deltaTime)
61.         {
62.             // set color with i as alpha
63.             img.color = new Color(1, 1, 1, i);
64.             yield return null;
65.         }
66.  
67.     }
68.  
69.     // fade from opaque to transparent
70.     IEnumerator FadeOut()
71.     {
72.         // loop over 1 second backwards
73.         for (float i = 1; i >= 0; i -= Time.deltaTime)
74.         {
75.             // set color with i as alpha
76.             img.color = new Color(1, 1, 1, i);
77.             yield return null;
78.         }
79.     }
80.  
81.     IEnumerator FadeInAndOut()
82.     {
83.         // loop over 1 second
84.         for (float i = 0; i <= 1; i += Time.deltaTime)
85.         {
86.             // set color with i as alpha
87.             img.color = new Color(1, 1, 1, i);
88.             yield return null;
89.         }
90.  
91.         //Temp to Fade Out
92.         yield return new WaitForSeconds(1);
93.  
94.         // loop over 1 second backwards
95.         for (float i = 1; i >= 0; i -= Time.deltaTime)
96.         {
97.             // set color with i as alpha
98.             img.color = new Color(1, 1, 1, i);
99.             yield return null;
100.         }
101.     }
102.  
103.     IEnumerator FadeOutAndIn()
104.     {
105.         // loop over 1 second backwards
106.         for (float i = 1; i >= 0; i -= Time.deltaTime)
107.         {
108.             // set color with i as alpha
109.             img.color = new Color(1, 1, 1, i);
110.             yield return null;
111.         }
112.  
113.         //Temp to Fade In
114.         yield return new WaitForSeconds(1);
115.  
116.         // loop over 1 second
117.         for (float i = 0; i <= 1; i += Time.deltaTime)
118.         {
119.             // set color with i as alpha
120.             img.color = new Color(1, 1, 1, i);
121.             yield return null;
122.         }
123.     }
124.  
125. }

 

How can i change the color on this to make it flash something other than white?

 

new Color(1,1,1,i) is the code for White with alpha = i.
One option would be to do something like this, but I did not test it.
You manually set the color in Inspector window, under Color:

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.UI;
3. using System.Collections;
4. public enum FadeAction
5. {
6.     FadeIn,
7.     FadeOut,
8.     FadeInAndOut,
9.     FadeOutAndIn
10. }
11. public class ImageFadeImproved : MonoBehaviour
12. {
13.     [Tooltip("The Fade Type.")]
14.     [SerializeField] private FadeAction fadeType;
15.     [Tooltip("the image you want to fade, assign in inspector")]
16.     [SerializeField] private Image img;
17.     [SerializeField] private Color color;
18.  
19.     public void Start()
20.     {
21.         if (fadeType == FadeAction.FadeIn)
22.         {
23.             StartCoroutine(FadeIn());
24.         }
25.         else if (fadeType == FadeAction.FadeOut)
26.         {
27.             StartCoroutine(FadeOut());
28.         }
29.         else if (fadeType == FadeAction.FadeInAndOut)
30.         {
31.             StartCoroutine(FadeInAndOut());
32.         }
33.         else if (fadeType == FadeAction.FadeOutAndIn)
34.         {
35.             StartCoroutine(FadeOutAndIn());
36.         }
37.     }
38.     // fade from transparent to opaque
39.     IEnumerator FadeIn()
40.     {
41.         // loop over 1 second
42.         for (float i = 0; i <= 1; i += Time.deltaTime)
43.         {
44.             // set color with i as alpha
45.             color.a = i;
46.             img.color = color;
47.             yield return null;
48.         }
49.     }
50.     // fade from opaque to transparent
51.     IEnumerator FadeOut()
52.     {
53.         // loop over 1 second backwards
54.         for (float i = 1; i >= 0; i -= Time.deltaTime)
55.         {
56.             // set color with i as alpha
57.             color.a = i;
58.             img.color = color;
59.             yield return null;
60.         }
61.     }
62.     IEnumerator FadeInAndOut()
63.     {
64.         // loop over 1 second
65.         for (float i = 0; i <= 1; i += Time.deltaTime)
66.         {
67.             // set color with i as alpha
68.             color.a = i;
69.             img.color = color;
70.             yield return null;
71.         }
72.         //Temp to Fade Out
73.         yield return new WaitForSeconds(1);
74.         // loop over 1 second backwards
75.         for (float i = 1; i >= 0; i -= Time.deltaTime)
76.         {
77.             // set color with i as alpha
78.             color.a = i;
79.             img.color = color;
80.             yield return null;
81.         }
82.     }
83.     IEnumerator FadeOutAndIn()
84.     {
85.         // loop over 1 second backwards
86.         for (float i = 1; i >= 0; i -= Time.deltaTime)
87.         {
88.             // set color with i as alpha
89.             color.a = i;
90.             img.color = color;
91.             yield return null;
92.         }
93.         //Temp to Fade In
94.         yield return new WaitForSeconds(1);
95.         // loop over 1 second
96.         for (float i = 0; i <= 1; i += Time.deltaTime)
97.         {
98.             // set color with i as alpha
99.             color.a = i;
100.             img.color = color;
101.             yield return null;
102.         }
103.     }
104. }

 

I've reworked it in more conventional and generalized way (this should work with both Image and Text elements, since they both derive from MaskableGraphic class.

Code (CSharp):

1. using System.Collections;
2. using UnityEngine;
3. using UnityEngine.UI;
4.  
5. public enum FadeType
6. {
7.     FadeIn,
8.     FadeOut,
9.     FadeInOut,
10.     FadeOutIn
11. }
12.  
13. public class UIFade : MonoBehaviour
14. {
15.     [Tooltip("The UI element you want to fade")]
16.     [SerializeField]
17.     private MaskableGraphic element;
18.  
19.     [Tooltip("Fade type")]
20.     [SerializeField]
21.     private FadeType fadeType;
22.  
23.     [Tooltip("Fade time")]
24.     [SerializeField]
25.     private float fadeTime = 1f;
26.  
27.     private Color color;
28.  
29.     void Start()
30.     {
31.         color = element.color;
32.         switch(fadeType)
33.         {
34.             case FadeType.FadeIn:
35.                 StartCoroutine(FadeIn());
36.                 break;
37.             case FadeType.FadeOut:
38.                 StartCoroutine(FadeOut());
39.                 break;
40.             case FadeType.FadeInOut:
41.                 StartCoroutine(FadeInOut());
42.                 break;
43.             case FadeType.FadeOutIn:
44.                 StartCoroutine(FadeOutIn());
45.                 break;
46.         }
47.     }
48.  
49.     private IEnumerator FadeOut()
50.     {
51.         for(float a = fadeTime; a >= 0; a -= Time.deltaTime)
52.         {
53.             element.color = new Color(color.r, color.g, color.b, a);
54.             yield return null;
55.         }
56.     }
57.  
58.     private IEnumerator FadeIn()
59.     {
60.         for(float a = 0; a <= fadeTime; a += Time.deltaTime)
61.         {
62.             element.color = new Color(color.r, color.g, color.b, a);
63.             yield return null;
64.         }
65.     }
66.  
67.     private IEnumerator FadeInOut()
68.     {
69.         StartCoroutine(FadeIn());
70.         yield return new WaitForSeconds(fadeTime);
71.         StartCoroutine(FadeOut());
72.     }
73.  
74.     private IEnumerator FadeOutIn()
75.     {
76.         StartCoroutine(FadeOut());
77.         yield return new WaitForSeconds(fadeTime);
78.         StartCoroutine(FadeIn());
79.     }
80. }

 

Thank you!