Unity 2018 Cookbook(Third Edition)
上QQ阅读APP看书,第一时间看更新

How to do it...

To animate a button for enlargement when the mouse is over it (the Highlighted state), do the following:

  1. Create a new Unity 2D project.
  2. Create a UI Button.
  3. In the Inspector Button (Script) component, set the Transition property to Animation.
  4. Click the Auto Generate Animation button (just below the Disabled Trigger property) for the Button (Script) component:
  1. Save the new controller (in new folder Animations), naming it button-animation-controller.
  2. Ensure that the Button GameObject is selected in the Hierarchy. In the Animation panel, select the Highlighted clip from the drop-down menu:
  1. In the Animation panel, click on the red record circle button, and then click on the Add Property button, choosing to record changes to the Rect Transform | Scale property.
  1. Two keyframes will have been created. Delete the second one at 1:00 (since we don't want a "bouncing" button):
  1. Select the frame at 1:00 by clicking one of the diamonds (both turn blue when selected), then press the Backspace/Delete key.
  2. Select the first keyframe at 0:00 (the only one now!). In the Inspector, set the X and Y scale properties of the Rect Transform component to (1.2, 1.2).
  3. Click on the red record circle button for the second time to end the recording of the animation changes.
  4. Save and run your scene, and you will see that the button smoothly animates to get larger when the mouse is over it, and then smoothly returns to its original size when the mouse has moved away.