[EDIT] How do I slowly make a color turn transparent?

Question

I have some UI which uses an image that I want to turn slowly invisible after being ignored for a while. I tried creating an Enumerator but I can't get it to work right.

     private IEnumerator fadeOut()
     {
         int i = 0;
         bool finished = false;
 
         while (finished == false)
         {
             for (i = 0; i < 5; i++)
             {
                 yield return new WaitForSeconds(1f);
             }
 
             img.color = new Color(img.color.r, img.color.g, img.color.b, img.color.a - 1);
 
             finished = img.color.a < 1 ? false : true;
 
             yield return new WaitForSeconds(0.2f);
 
         }
     }

After a revision, I've edited my code but have the same problem-- the transition isn't smooth, in one frame my alpha levels go from 255 to -1 (rounded up to 0). I'm using an event trigger which uses my functions base on if the mouse goes over my object or leaves it's box.

 using System.Collections;
 using System.Collections.Generic;
 using UnityEngine;
 using UnityEngine.UI;
 
 public class boxController : MonoBehaviour {
 
     Animator anim;
     Image img;
     
     Coroutine fade;
     Coroutine show;
 
     void Start () {
         anim = GetComponent<Animator>();
         img = GetComponent<Image>();
         fade = StartCoroutine(Wait());
     }
 
     public void EnterMouse()
     {
         anim.SetBool("isUp", true);
 
         if(fade != null)
         {
             StopCoroutine(fade);
             fade = null;
         }
 
         show = StartCoroutine(FadeIn());
     }
 
     public void ExitMouse()
     {
         anim.SetBool("isUp", false);
 
         if(show != null)
         {
             StopCoroutine(show);
             show = null;
         }
 
         fade = StartCoroutine(Wait());
     }
 
 
     private IEnumerator Wait()
     {
         for (int i = 0; i < 5; i++)
         {
             yield return new WaitForSeconds(1f);
         }
         fade = StartCoroutine(FadeOut());
     }
  
     private IEnumerator FadeOut()
     {
         for (int i = (int)img.color.a - 1; i < 1; i--)
         {
             img.color = new Color(255, 255, 255, i);
             yield return new WaitForSeconds(0.01f);
         }
     }
 
     private IEnumerator FadeIn()
     {
         for(int i = (int)img.color.a + 1; i > 254; i++)
         {
             img.color = new Color(255, 255, 255, i);
             yield return new WaitForSeconds(0.005f);
         }
     } 
 }

Answer 1

Answer by Rugbug_Redfern · Jan 15, 2018 at 12:01 AM

Here's my code: (I made a whole class)

 using System.Collections;
 using System.Collections.Generic;
 using UnityEngine;
 using UnityEngine.UI;
 
 public class FadeOut : MonoBehaviour {
 
     public bool fade = false;
     Image img;
     float speed;
 
     void Start() {
         img = GetComponent<Image>();
         FadeOutImage(0.5f);
     }
 
     void FadeOutImage(float _speed) {
         speed = _speed;
         fade = true;
     }
 
     void Update() {
         if(fade) {
             img.color = new Color(img.color.r, img.color.b, img.color.g, img.color.a - speed * Time.deltaTime);
         }
     }
 }

Just call FadeOutImage(float speed) in the place where you want the image to start fading out.

I just try to always stay away from IEnumerators.

Add comment · Show 1 · Share

Dinosaurstic · Jan 15, 2018 at 02:56 AM 0

Share

I tried something like this...

 using System.Collections;
 using System.Collections.Generic;
 using UnityEngine;
 using UnityEngine.UI;
 
 public class boxController : MonoBehaviour {
 
     public int fInSpeed = 150;
     public int fOutSpeed = 80;
 
     bool fadingIn = false;
     bool fadingOut = false;
 
     Animator anim;
     Image img;
     
     Coroutine fade;
 
     void Start () {
         anim = GetComponent<Animator>();
         img = GetComponent<Image>();
         fade = StartCoroutine(Wait());
     }
 
     public void EnterMouse()
     {
         anim.SetBool("isUp", true);
 
         if(fade != null)
         {
             StopCoroutine(fade);
             fade = null;
         }
 
         fadingIn = true;
     }
 
     public void ExitMouse()
     {
         anim.SetBool("isUp", false);
 
         fadingIn = false;
         
         fade = StartCoroutine(Wait());
     }
 
     private void Update()
     {
         if (fadingIn && img.color.a < 255)
         {
             img.color = new Color(255, 255, 255, img.color.a + fInSpeed * Time.deltaTime);
             fadingIn = img.color.a < 255 ? true : false;
         }
 
         if (fadingOut && img.color.a > 0)
         {
             img.color = new Color(255, 255, 255, img.color.a - fOutSpeed * Time.deltaTime);
             fadingOut = img.color.a > 0 ? true : false;
         }
 
     }
 
     private IEnumerator Wait()
     {
         for (int i = 0; i < 5; i++)
         {
             yield return new WaitForSeconds(1f);
         }
         fadingOut = true;
     }
 }

...but it did not end up working, and roughly set the alpha level to 0 ins$$anonymous$$d of moving down the value smoothly. Do you think it has anything to do with working on an image component ins$$anonymous$$d of a sprite renderer component?

Answer 2

Answer by Murddock · Jan 15, 2018 at 01:38 AM

(Srry for my bad english )

You should put the color change inside in the for loop ( i think While doesn't was necessary ), your While loop could stop in alpha 0.9 cause its less than 1 and still be completely visible. (alpha goes from 1 to 0 )

I show you an example of how I had make something like that:

I hope that helps you :)

     IEnumerator ChangeColor () {
         
 
         for (float f = 0f; f <= 4; f += 0.1f) {
             yield return new WaitForSeconds (0.02f);
             Color colorTemp = rend.material.color;
             colorTemp.a -= 0.035f;
             rend.material.color = colorTemporal;
 
         
         }
         yield return null;
 
 
         }
     }

Add comment · Share

[EDIT] How do I slowly make a color turn transparent?

2 Replies

Your answer

Welcome to Unity Answers

Follow this Question

Related Questions