Question by Qriva · Sep 09 at 12:30 AM · animation animator material image

How to animate UI Image material in Animation view

I made sprite shader (in graph) allowing me to set outline and dissolve. There is material using this shader and it was set to material property of some UI Image. The main goal is to animate properties (outline/dissolve) of single Image instance.

As I discovered this material works a bit different than Renderer.material - it's shared between all instaces so any changes to material updates appearance of all other instances. Obviously it's not desired behaviour, so I used trick below to make seperate instance:

 image.material = Instantiate(image.material);

This part works well as long as property is updated in code like this:

 image.material.setFloat("_Dissolve", 0.1f);

What I wanted to do is to use Animation timeline to animate these properties, but there is problem - it's not possible to access material properties. What I also tried to do is make accesor in Image controler script, but they are not visible in animation property list:

     [SerializeField] public float outline
     {
         get { return m_Outline; }
         set
         {
             value = Mathf.Clamp(value, 0, 1);
             material.setFloat("_Dissolve", value);
         }
     }

Is there any way to change shader properties using Animator and Animation timeline or expose them for animation?

Add comment · Show 3

ejoo_pasco · Sep 09 at 02:39 PM 0

I had the same problem with TMPro UGUI text property. I was able to animate it by accessing a method on the animated object via animation event. The method than changed the text. 'So you can animate the outline via animation event. BTW in the Inspector window for animation event first I couldnt find my functions. It's easier/faste to go UP with the arrow in the function-select menu. On the other hand I with this mechanism can't see the animation in the preview. So I am also verrry curious about a better solution.

Qriva ejoo_pasco · Sep 10 at 01:32 AM 0

Hello, the problem I see in this solution, is that you can't animate for example float value from 1 to 0. Also I think corutine would better solution in case of making multiple events. It would be better to avoid it, so question is how to make it differently.

ejoo_pasco Qriva · Sep 10 at 09:24 AM 0

Ok, I understand. I just had to change the text instantly, not in a smooth transition. So that's no good solution for you.