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.
1 Like
You can use coroutines to animate a fade in code, eg:
using UnityEngine;
using UnityEngine.UI;
using System.Collections;
public class ImageFade : MonoBehaviour {
// the image you want to fade, assign in inspector
public Image img;
public void OnButtonClick()
{
// fades the image out when you click
StartCoroutine(FadeImage(true));
}
IEnumerator FadeImage(bool fadeAway)
{
// fade from opaque to transparent
if (fadeAway)
{
// loop over 1 second backwards
for (float i = 1; i >= 0; i -= Time.deltaTime)
{
// set color with i as alpha
img.color = new Color(1, 1, 1, i);
yield return null;
}
}
// fade from transparent to opaque
else
{
// loop over 1 second
for (float i = 0; i <= 1; i += Time.deltaTime)
{
// set color with i as alpha
img.color = new Color(1, 1, 1, i);
yield return null;
}
}
}
}
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.
20 Likes
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:
using UnityEngine.UI;
[Header("Blink")]
public Image m_BlinkImage;
[Range(0.0f, 0.5f)]
public float m_BlinkTime = 0.2f; //Time we stay at blink image
[Range(0.1f, 0.5f)]
public float m_BlinkTransitionTime = 0.2f; //Time for fading in and out (each one the same amount)
private IEnumerator m_BlinkCoroutine = null;
IEnumerator Blink(Vector3 antipodal)
{
//BLINK IN (fade from transparent to opaque)
float alpha = 0;
for (float i = 0; i <= m_BlinkTransitionTime; i += Time.deltaTime)
{
alpha = (i - 0) / (m_BlinkTransitionTime - 0); //Normalize value between 0 and 1
// set color with i as alpha
m_BlinkImage.color = new Color(m_BlinkImage.color.r, m_BlinkImage.color.g, m_BlinkImage.color.b, alpha);
//print(m_BlinkImage.color);
yield return null;
}
m_BlinkImage.color = new Color(m_BlinkImage.color.r, m_BlinkImage.color.g, m_BlinkImage.color.b, 1); // fix residual values
//TELEPORT
m_ShipController.Teleport(antipodal);
yield return new WaitForSeconds(m_BlinkTime);
//BLINK OUT (fade from opaque to transparent)
for (float i = m_BlinkTransitionTime; i >= 0; i -= Time.deltaTime)
{
alpha = (i - 0) / (m_BlinkTransitionTime - 0); //Normalize value between 0 and 1
// set color with i as alpha
m_BlinkImage.color = new Color(m_BlinkImage.color.r, m_BlinkImage.color.g, m_BlinkImage.color.b, alpha);
yield return null;
}
m_BlinkImage.color = new Color(m_BlinkImage.color.r, m_BlinkImage.color.g, m_BlinkImage.color.b, 0); // fix residual values
//Close coroutine
m_BlinkCoroutine = null;
}
Hope it’s useful
2 Likes
Thank you!
1 Like
I don’t know what I’m missing, why are you substracting zero from these values?
Code Improved C#
using UnityEngine;
using UnityEngine.UI;
using System.Collections;
public enum FadeAction
{
FadeIn,
FadeOut,
FadeInAndOut,
FadeOutAndIn
}
public class ImageFadeImproved : MonoBehaviour
{
[Tooltip("The Fade Type.")]
[SerializeField] private FadeAction fadeType;
[Tooltip("the image you want to fade, assign in inspector")]
[SerializeField] private Image img;
public void Start()
{
if (fadeType == FadeAction.FadeIn)
{
StartCoroutine(FadeIn());
}
else if (fadeType == FadeAction.FadeOut)
{
StartCoroutine(FadeOut());
}
else if (fadeType == FadeAction.FadeInAndOut)
{
StartCoroutine(FadeInAndOut());
}
else if (fadeType == FadeAction.FadeOutAndIn)
{
StartCoroutine(FadeOutAndIn());
}
}
// fade from transparent to opaque
IEnumerator FadeIn()
{
// loop over 1 second
for (float i = 0; i <= 1; i += Time.deltaTime)
{
// set color with i as alpha
img.color = new Color(1, 1, 1, i);
yield return null;
}
}
// fade from opaque to transparent
IEnumerator FadeOut()
{
// loop over 1 second backwards
for (float i = 1; i >= 0; i -= Time.deltaTime)
{
// set color with i as alpha
img.color = new Color(1, 1, 1, i);
yield return null;
}
}
IEnumerator FadeInAndOut()
{
// loop over 1 second
for (float i = 0; i <= 1; i += Time.deltaTime)
{
// set color with i as alpha
img.color = new Color(1, 1, 1, i);
yield return null;
}
//Temp to Fade Out
yield return new WaitForSeconds(1);
// loop over 1 second backwards
for (float i = 1; i >= 0; i -= Time.deltaTime)
{
// set color with i as alpha
img.color = new Color(1, 1, 1, i);
yield return null;
}
}
IEnumerator FadeOutAndIn()
{
// loop over 1 second backwards
for (float i = 1; i >= 0; i -= Time.deltaTime)
{
// set color with i as alpha
img.color = new Color(1, 1, 1, i);
yield return null;
}
//Temp to Fade In
yield return new WaitForSeconds(1);
// loop over 1 second
for (float i = 0; i <= 1; i += Time.deltaTime)
{
// set color with i as alpha
img.color = new Color(1, 1, 1, i);
yield return null;
}
}
}
4 Likes
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:
using UnityEngine;
using UnityEngine.UI;
using System.Collections;
public enum FadeAction
{
FadeIn,
FadeOut,
FadeInAndOut,
FadeOutAndIn
}
public class ImageFadeImproved : MonoBehaviour
{
[Tooltip("The Fade Type.")]
[SerializeField] private FadeAction fadeType;
[Tooltip("the image you want to fade, assign in inspector")]
[SerializeField] private Image img;
[SerializeField] private Color color;
public void Start()
{
if (fadeType == FadeAction.FadeIn)
{
StartCoroutine(FadeIn());
}
else if (fadeType == FadeAction.FadeOut)
{
StartCoroutine(FadeOut());
}
else if (fadeType == FadeAction.FadeInAndOut)
{
StartCoroutine(FadeInAndOut());
}
else if (fadeType == FadeAction.FadeOutAndIn)
{
StartCoroutine(FadeOutAndIn());
}
}
// fade from transparent to opaque
IEnumerator FadeIn()
{
// loop over 1 second
for (float i = 0; i <= 1; i += Time.deltaTime)
{
// set color with i as alpha
color.a = i;
img.color = color;
yield return null;
}
}
// fade from opaque to transparent
IEnumerator FadeOut()
{
// loop over 1 second backwards
for (float i = 1; i >= 0; i -= Time.deltaTime)
{
// set color with i as alpha
color.a = i;
img.color = color;
yield return null;
}
}
IEnumerator FadeInAndOut()
{
// loop over 1 second
for (float i = 0; i <= 1; i += Time.deltaTime)
{
// set color with i as alpha
color.a = i;
img.color = color;
yield return null;
}
//Temp to Fade Out
yield return new WaitForSeconds(1);
// loop over 1 second backwards
for (float i = 1; i >= 0; i -= Time.deltaTime)
{
// set color with i as alpha
color.a = i;
img.color = color;
yield return null;
}
}
IEnumerator FadeOutAndIn()
{
// loop over 1 second backwards
for (float i = 1; i >= 0; i -= Time.deltaTime)
{
// set color with i as alpha
color.a = i;
img.color = color;
yield return null;
}
//Temp to Fade In
yield return new WaitForSeconds(1);
// loop over 1 second
for (float i = 0; i <= 1; i += Time.deltaTime)
{
// set color with i as alpha
color.a = i;
img.color = color;
yield return null;
}
}
}
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.
using System.Collections;
using UnityEngine;
using UnityEngine.UI;
public enum FadeType
{
FadeIn,
FadeOut,
FadeInOut,
FadeOutIn
}
public class UIFade : MonoBehaviour
{
[Tooltip("The UI element you want to fade")]
[SerializeField]
private MaskableGraphic element;
[Tooltip("Fade type")]
[SerializeField]
private FadeType fadeType;
[Tooltip("Fade time")]
[SerializeField]
private float fadeTime = 1f;
private Color color;
void Start()
{
color = element.color;
switch(fadeType)
{
case FadeType.FadeIn:
StartCoroutine(FadeIn());
break;
case FadeType.FadeOut:
StartCoroutine(FadeOut());
break;
case FadeType.FadeInOut:
StartCoroutine(FadeInOut());
break;
case FadeType.FadeOutIn:
StartCoroutine(FadeOutIn());
break;
}
}
private IEnumerator FadeOut()
{
for(float a = fadeTime; a >= 0; a -= Time.deltaTime)
{
element.color = new Color(color.r, color.g, color.b, a);
yield return null;
}
}
private IEnumerator FadeIn()
{
for(float a = 0; a <= fadeTime; a += Time.deltaTime)
{
element.color = new Color(color.r, color.g, color.b, a);
yield return null;
}
}
private IEnumerator FadeInOut()
{
StartCoroutine(FadeIn());
yield return new WaitForSeconds(fadeTime);
StartCoroutine(FadeOut());
}
private IEnumerator FadeOutIn()
{
StartCoroutine(FadeOut());
yield return new WaitForSeconds(fadeTime);
StartCoroutine(FadeIn());
}
}
1 Like
Thank you!