Unity Fade In/Out animation

unity image fade animation transparency

For my 2D game I wanted to create a “hurt” effect. It should fade in with red color and then fade out back to transparent.

All we need to do is to create an empty image and apply the 3-step animation for it. In my case I scaled the imaged for the side of the canvas.

Image Fade In / Fade Out in Unity

For you animation select Add Property and choose Image – Color. After that you can control the alpha channel (transparency) of the image.

On this screenshot I selected the first frame of animation and set the alpha channel to 0.

unity image fade in

Now, using the next stepĀ button I switched to the 2nd step. On this step we should set the color to the most visible value (see the alpha-value indicator on the screenshot).

unity image fade out

For the third step repeat the actions made for the 1st one.

And that’s all! When you run the animation you can see the image fading in and fading out.

To make it useable as the “Hurt” animation I recommend you:

  • disable looping for this animation (in the Inspector tab)
  • use triggers for running the animation

Leave a Reply

Be the First to Comment!