Want to Animate UI Buttons in Unity 4.6?
In this Unity tutorial we’ll go over how to animate UI buttons using Mecanim. Using Mecanim will give us a ton of flexibility in regards to how our buttons will react to various states of the button.
There are four states we can use for our buttons:
- Normal Trigger
- Highlighted Trigger
- Pressed Trigger
- Disabled Trigger
The Normal Trigger is the default state of the button. This means we can have an idle type of animation for our button when nothing is happening.
The Highlighted Trigger is used when we hover over our button. So when the cursor is over the button itself it’ll then trigger the Highlighted state. We can use this to indicate a special animation when the player hovers over the button such as the button increasing in side, or moving side to side.
The Pressed Trigger is used when we click our button. We can indicate that we’ve pressed the button with an animation. You can simulate a button press with a change in size, or have the button fade between colors. In our case we’ll rotate our button 360 degrees for an exaggerated motion.
The Disabled Trigger is when our button is no longer enabled. If we disable this button for any reason we can use an animation of some sort to indicate that the button is not active. We won’t be using this in this video as our button will always be active.
So here are the things you need to have in order to animate your buttons with Mecanim
- Animator Component applied to the button
- Animator Controller created and assigned to the Animator Component
- Animation States for all 4 button states (mentioned above)
- Animation Clips for all 4 button states
- Transitions from Any State to each of the button states
- Parameters to be used on each transition to each state
Phew that’s a lot of stuff!
Thankfully Unity does a lot of this work for us, watch the video to find out how!