How to Tween alpha of an image?

Unity Engine
1

On NGUI it was done with TweenAlpha.Begin().
How to fade in an image in new (awesome btw.) UI?

2

maybe Graphics.CrossFadeAlpha?

3

Bumping this. What if you have a group of objects? I’m using CanvasGroup to change the alpha of a message box & its contents, and this does not seem to be an option.

(my bad, I was referencing the wrong object. this works.)

4

Would also be interested in a clean solution.
Currently i am getting every CanvasRenderer at the start. Then i am changing their alpha by looping trough them.

cr=GetComponentsInChildren<CanvasRenderer>();
for(int i=0;i<cr.Length;i++)
cr[i].SetAlpha(alphaValue);

There should be an easier way to fadein/out a group of nested gameobjects.

5

I’m not sure what “this” refers to, since CanvasGroup does precisely what you describe.

@Kogar use a CanvasGroup, that’s exactly what they do.

2 Likes
6

@StarManta Exactly what i needed. I had not tried CanvasGroup yet.
Would be nice to have a fading included, but an IEnumerator does it too. I based mine on //Quick change over time math - Questions & Answers - Unity Discussions

public float alphaFadeSeconds = 0.1f;
private CanvasGroup cg; //get the component in start()

IEnumerator alphaFade(float alpha)
{
   float start = Time.time;
   while(cg.alpha != alpha)
   {
     float elapsed = Time.time - start;
     float normalisedTime = Mathf.Clamp((elapsed / alphaFadeSeconds)*Time.deltaTime, 0, 1);
     cg.alpha = Mathf.Lerp(cg.alpha, alpha, normalisedTime) ;
     yield return 0;  
   }
   yield return true;
}

void setVisibility(float alpha = 0)
{
   StopCoroutine("alphaFade");  //stop currently fading coroutine
   StartCoroutine("alphaFade", alpha); //start from current alpha state to target alpha
}
1 Like
7

in a few weeks i should have a nice tweening soultion in for the new UI system, that allows for straight up tweening or via curves, for some effects.

8

Use CanvasGroup and fade that alpha. That has the benefit of fading every game object under it. You can animate this property through script or through Animation/Animator in any way you see fit with curves and all.

9

Just stumbled on this issue as well. You could modifiy the default iTween script like this to make it work (though it should certainly be optimized…).

// Somewhere at line 3345 in method GenerateColorToTargets()
else if(GetComponent<CanvasRenderer>())
{
    colors = new Color[1,3];
    colors[0,0] = colors[0,1] = GetComponent<CanvasRenderer>().GetColor();
}

// Somewhere at line 4128 in method ApplyColorToTargets()
else if(GetComponent<CanvasRenderer>())
{
    GetComponent<CanvasRenderer>().SetColor(colors[0,2]);
}

// Somewhere at line 4150 in method ApplyColorToTargets()
else if(GetComponent<CanvasRenderer>())
{
    GetComponent<CanvasRenderer>().SetColor(colors[0,1]);
}

Example call to fade out a child image of the Canvas GameObject:
iTween.ColorTo(GameObject.Find(“Canvas”).transform.Find(“Image”).gameObject, new Color(0.0F,0.0F,0,0F), 1.0F);

2 Likes
10

Awesome. It work. thank you