UI Image fading via button

Question

Hey there. I'm completely new to programming, and i can't find the reason why this is not working. I am trying to fade in a UI Image on the press of a button. my script looks like this:

public class Fade : MonoBehaviour{

 public Image Image;
 public bool Fading;

 public void ToggleFade()
 {
     Fading = true;
 }

 void Start()
 {
     var tempColor = Image.color;
     tempColor.a = 0f; 
     Image.color = tempColor;
 }

 void Update()
 {
     if (Fading == true)
     {          
         Image.CrossFadeAlpha(1, 2.0f, false);
     }
 }

I have my Image referenced to Image, and the button is calling the function ToggleFade() on Click. The image is transparent when i hit play, but the button doesnt seem to do anything. Any help would be much appreciated! Thanks for taking a look :)

cheers

Answer 1

Best Answer

Answer by ranch000 · Jan 24 at 04:29 AM

In your Start() method. Do this instead:

Image.canvasRenderer.SetAlpha( 0.0f );

Add comment · Show 1 · Share

Prehm · Jan 24 at 01:41 PM 0

Share

simple as that. worked, thanks!

Answer 2

Answer by Sabre-Runner · Jan 24 at 09:21 AM

I'm not sure I understand what you're doing here or what's wrong. But you can use my package as it works perfectly.

Add comment · Show 1 · Share

Prehm · Jan 24 at 01:54 PM 0

Share

thanks. but i have no idea how i would get this working <.<

Answer 3

Hi @Prehm, Instead of only trying to get the alpha and changing with CrossFadeAlpha, I got the color and used Color.Lerp, I hope this helps.

 public class FadeImage : MonoBehaviour
 {
     public Image image;         //The Image
     public bool fading;         //Bool if it should be fading
 
     private Color startLerp;    //The start color where the alpha is 0
     private Color endLerp;      //The end color with full alpha
 
     private float startTime;    //The time you've pressed the button
     private float t;
 
     public float speed;         //The speed with which you want to increase the alpha
 
     public void ToggleFade()
     {
         fading = true;
         startTime = Time.time;
     }
 
     //Set the start and end lerp
     public void Start()
     {
         endLerp = image.color;
         image.color = new Color(endLerp.r, endLerp.g, endLerp.b, 0.0f);
         startLerp = image.color;
 
     }
 
     //Lerp the color and turn off fading when you are at max alpha
     public void Update()
     {
         if (fading)
         {
             t = (Time.time - startTime) * speed;
             image.color = Color.Lerp(startLerp, endLerp, t);
 
             if (image.color == endLerp)
                 fading = false;
 
         }
     }
 }

UI Image fading via button

3 Replies

Your answer

Welcome to Unity Answers

Follow this Question

Related Questions