Mecanim Tips: Animating UI Buttons

Sharing is caring:

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!

 

Assets Used

Robot Lab from Unity Technologies (Asset Store)

Jonathan Gonzalez

I love all things in game development and want to contribute by teaching others how to create games. I'm always looking to help others create awesome digital worlds. I've been a hardcore gamer since I was a kid and now it's my turn to create awesome digital experiences.

More Posts - Website

Follow Me:
TwitterYouTube

Comments

  1. So sad that you had to go to the US Army for money! , I love you (No Homo feeling) and all your tutorials brother

  2. You’re the only one that told me exactly what i wanted to know. Thanks.

  3. Absolutely Perfect! Quick, concise, and exactly what needs to be shown. The Unity Manual show nothing about this cool feature that really adds a lot of character. Thank you Johnathan

Speak Your Mind

*