This UI button and its animation was created for an art test. A sample video was given showing the button going through its four states of idle, hover, click and release. I was tasked to recreate this button in Unity and have its animation controlled by Unity's Mecanim Animation controller. This button uses Unity's UI Canvas and image components with sprite images to render each state. The source images were authored as vector art in Illustrator to ensure resolutions are scalable without loss.
Button States from Left to Right, Idle, Hover, Click
Vector Preview of UI Art
To handle blending between images, a Canvas Group component was used that has an Alpha Transparency parameter with float values between zero(Full Transparency) and one(Opaque). This alpha parameter is then key framed for animation. A C# script was created to handle state switching on mouse events and feed information to the animation controller, via boolean values and play the correct animations. The script also handles unusual behaviors so that the button only changes states in expected ways.
Unity Scene and Animation Controller
Button In Idle State
Button In Hover State
Button In Clicked State
Sample of Key Framed Attributes