Introduction

Animate UI Materials allows editing and animating materials for a single UI component.

Installation

This package required 2021.3 or later

Install with OpenUPM

openupm add com.lgarczyn.animate-ui-material

Install with the Unity Package Manager

1. In the Unity Editor
2. Open the Windows Menu
3. Open the Package Manager
4. Press +
5. Add Package from git URL
6. Enter https://github.com/lgarczyn/AnimateUIMaterials.git#upm

Install With Asset Store

Use the Unity Asset Store

Download Directly

Download asset from Releases folder

Setup

Import the package into your project

Simply add the GraphicMaterialOverride component to an UI element, such as an Image with a custom Material

When selecting the dropdown “Add Override”, you will be greeted with every possible property you can animate.

You can ignore those you don’t know, such as the _Stencil properties. They are internal to UI stencil rendering. Simply select “_Color” for example.

Two things will happen:

1. A new modifier will be listed in the GraphicMaterialOverride component You can already edit the color value, and the change will only affect the Image component

2. A new gameobject will be created, holding a GraphicPropertyOverride component The value displayed here is the exact same as in the GraphicMaterialComponent. However this value can also be animated.

Animation

To animate the property, add the usual Animator component to the image

Create a new AnimationClip

Click Add Property and select _Color Override, then Graphic Property Override Color, then Graphic Property Override Color.Property Value

You can now animate the value like any other !

Alternatively, hit the Record button, and simply modify the properties from the GraphicMaterialOverride inspector

Baking

To get the final modified material as a material asset, simply open the context menu of your GraphicMaterialOverride or Graphic and press "Bake Modified Material". A new material variant will be saved alongside the source material.

Sharing across Graphics

To make several UI elements display the same animated material — sharing the work and batching into one draw call — add a GraphicMaterialOverrideMirror to each follower. As long as the followers and the source share the same base Material asset, the Mirror finds and reuses the modified instance automatically. To opt out of sharing, give an element a different material variant.

Both Graphics must be at the same stencil Mask depth (RectMask2D is unaffected). The Mirror's inspector reports its current state.

End Notes

If you encounter a bug or need any help, please contact me at fleeting.being.official@gmail.com

Don’t hesitate to look into the code if you want to know how things work !