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!

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

France’s Coolest Young Watch Collectors Do A Hands-On Review Of The New Baltic Aquascaphe GMT

Using your Sony camera as a webcam on Mac and PC just got a lot easier

The Yellow-throated Vireo

Yellow-throated vireo. Photo by the author.

Maximizing speedy access to your digital images

iQOO 9 5G Mobile

The Ever-singing Dickcissel

Male dickcissel. Photo by the author.

The Trekker Digest — April 2022

Marsh Wren — This bird will be featured in a story in May 2022.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adam Reed

Adam Reed

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!

More from Medium

Variables! — The building blocks of programming

How to Remove a Large File from Commit History in Git?

Making nice cameras in Unity with the Cinemachine plugin

Unity Dev Essentials: Connecting Unity to .NET IDEs