Animating UI Image Alphas in Timeline

This article is essentially an add-on to the segment on using Animation Tracks and will cover animating an image's colors as well as their “Alpha Transparency” values.

Animating changes in the alpha of an object is useful when wanting to add fade-ins or fade-outs from your shots, or cinematics.

To do this, you simply right-click within the Timeline editor and select “Animation Track”.

Now create a new UI image object in the hierarchy. Change the transform’s “Anchor” to stretch in all directions as seen in the example here.

Then be sure to change the transform’s Left, Top, Right, and Bottom parameters to 0.

and don’t forget to set the “Canvas Scaler” to “Scale With Screen Size”.

Attach the new image to the Animation Track, move the keyframe marker to the beginning and click the record button.

Change the image object’s color to black. This will also set the initial keyframe.

Move the keyframe marker forward along the timeline to the point you want the fade into the end and then click the record button.

Now go back to the UI image and change its “Alpha” value to 0. This will set the second keyframe.

You can do this same process and change the colors or other values of an object too!

Hi, my name is Adam Reed and I am a software engineer specializing in Unity and C# development. Feel free to scroll through and check out some of my work!