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

You can see such an example in the demo scene.

To start, 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.

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

If you encounter a bug or need any help, please contact me at [email protected]

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