Lerp in Coroutine from UI Button

I have a UI Canvas with a Button and a Panel. The Panel has a script that controls fading. In this script there is a coroutine containing a lerp, and a method to call this coroutine. When I call that method from the button, the lerp happens instantly.

This is my script:

Code (CSharp):

1. using System.Collections;
2. using UnityEngine;
3. using UnityEngine.UI;
4.  
5. public class ToggleOpacity : MonoBehaviour
6. {
7.     public void StartFadeCoroutine()
8.     {
9.         StartCoroutine(FadeCoroutine());
10.     }
11.  
12.     private IEnumerator FadeCoroutine()
13.     {
14.         //Get color component
15.         Image image = this.GetComponent<Image>();
16.         //Get color values
17.         Color invisible = image.color;
18.         invisible.a = 0;
19.         Color visible = image.color;
20.         visible.a = 1;
21.  
22.         image.color = Color.Lerp(invisible, visible, 1f);
23.         yield return null;
24.     }
25. }
26.  

 

Thats because you're not doing anything. If you want to lerp it over time, you can do it like so:

Code (CSharp):

1. [Tooltip("In Seconds")]
2. public float TimeToLerp = 3f;
3.  
4. private float _startTime;
5. public void StartFadeCoroutine()
6.     {
7.         _startTime = Time.time;
8.         StartCoroutine(FadeCoroutine());
9.     }
10.  
11.     private IEnumerator FadeCoroutine()
12.     {
13.         //Get color component
14.         Image image = this.GetComponent<Image>();
15.         Color startColor = invisible;
16.         Color endColor = startColor;
17.         endColor.a = 1f;
18.  
19.         float percentage = 0f;
20.         while (percentage < 1f) {
21.              percentage = (Time.time - _startTime) / TimeToLerp;
22.              image.color = Color.Lerp(startColor , endColor , percentage);
23.              yield return null;
24.         }
25.     }

Just make sure you're not starting multiple coroutines at once.

And using .GetComponent<> everytime is not efficient. Use something like .OnValidate + public / [SerializeField] to save references in editor. Or use Awake / Start for that.

 

I have updated my code and everything works perfectly. This code will fade a UI Panel and child Text whenever a button is pressed:

Code (CSharp):

1. using System.Collections;
2. using UnityEngine;
3. using UnityEngine.UI;
4.  
5.  
6. public class ToggleOpacity : MonoBehaviour
7. {
8.     [Tooltip("In Seconds")]
9.     public float fadeDuration = 1f;
10.  
11.     Image image;
12.     Text text;
13.     Color imageColorInvisible, imageColorVisible, textColorVisible, textColorInvisible;
14.     float _startTime, percentage;
15.     bool fadeComplete;
16.  
17.     private void Awake()
18.     {
19.         image = this.GetComponent<Image>();
20.         text = GetComponentInChildren<Text>();
21.  
22.         imageColorInvisible = image.color;
23.         imageColorInvisible.a = 0;
24.         imageColorVisible = image.color;
25.         imageColorVisible.a = 1;
26.  
27.         textColorInvisible = text.color;
28.         textColorInvisible.a = 0;
29.         textColorVisible = text.color;
30.         textColorVisible.a = 1;
31.        
32.         fadeComplete = true;
33.         percentage = 0f;
34.     }
35.  
36.     public void StartFadeCoroutine()
37.     {
38.         if (fadeComplete == true)
39.         {
40.             _startTime = Time.time;
41.             percentage = 0f;
42.             StartCoroutine(FadeCoroutine());
43.         }
44.     }
45.  
46.     private IEnumerator FadeCoroutine()
47.     {
48.         if (image.color.a == 1)
49.         {
50.             while (percentage < 1f)
51.             {
52.                 fadeComplete = false;
53.                 percentage = (Time.time - _startTime) / fadeDuration;
54.                 image.color = Color.Lerp(imageColorVisible, imageColorInvisible, percentage);
55.                 text.color = Color.Lerp(textColorVisible, textColorInvisible, percentage);
56.                 yield return null;
57.             }
58.             fadeComplete = true;
59.         }
60.         else if(image.color.a == 0)
61.         {
62.             while (percentage < 1f)
63.             {
64.                 fadeComplete = false;
65.                 percentage = (Time.time - _startTime) / fadeDuration;
66.                 image.color = Color.Lerp(imageColorInvisible, imageColorVisible, percentage);
67.                 text.color = Color.Lerp(textColorInvisible, textColorVisible, percentage);
68.                 yield return null;
69.             }
70.             fadeComplete = true;
71.         }
72.     }
73. }
74.