This UI button and animation was done for an art test. I was given a sample video of a button animating through idle, hover, click and release states and asked to recreate it in Unity with a Mecanim Animation Controller directing the animation. Due to the fact that this was a UI button and the sample was perfectly round, I opted to create the button as a stack of four planes each with a single texture using alpha transparency. The final button uses 32 triangles as the planes were made are 10-sided to minimize overdraw and are animated in Maya. The button textures were made in Illustrator as vector art so that edits are easily made and the art is scalable without losing resolution. The texture sheet for the button contains all the states of the button to reduce texture loads as much as possible.
Button states from left to right: Idle, Hover, Click
Vector preview of the button art
To handle the texture blending, I created a custom shader in Shader Forge for Unity. The shader blends between the state textures using LERPs and is controlled by exposing the variable that sets the LERP level. I then wrote a C# script that ramps the LERP variable in real time using Time.deltatime so that the blend animations always consistent no matter the performance of the machine running it. I also exposed values to control the speed of the blend in the Unity inspector so that tweaks can be made without altering code. The script feeds the boolean values of the states reported by mouse events to the animation controller to advance the state machine and play the needed animation. Lastly, the script handles unusual behavior like clicking on the button and then moving off the button before releasing the mouse so that the button states only change in expected ways. This prevents the user from encountering unexpected behavior and breaking their immersion.
The Unity scene showing the animation controller and custom shader in the inspector
Custom shader to blend textures for each button state
Texture sheet for button states
Maya scene showing mesh construction and animation