Anime button selections to make them easier to understand
Verification environment
- Windows
-
- Windows 11
- Unity Editor
-
- 2020.3.25f1
Prerequisites for this tip
The following settings have been made in advance as a prerequisite for the explanation of these tips.
reference
At first
If a button is selected, it will be slightly darker by default.
However, it can be confusing, so you can change the color of the selection in the inspector.
Here, we would like to make the button appear larger when the button is selected as an additional element. When the button becomes larger, it also adds a movement such as gradually increasing in anime.
Button Placement
Place the buttons normally. Take into account that the buttons will be larger, so leave a short pause.
Set up anime
With the button selected, Button change "Transition" to "Anime" from the component.
Then a button called "Auto Generate Animation" will appear, so click it.
The Save Anime Controller dialog appears.
The location is arbitrary, but this time it will be saved in the same folder Scenes as the scene.
The file name is ButtonSelected .
The following files are created in the project: The type of anime is related to the behavior of the button.
Displays the anime window.
Select the button that you just generated the anime for.
Then, the contents of the anime tab will be enabled, so select from the anime type Selected .
Click the Record button. If you change each value in the inspector in this state, it will be registered as a parameter during anime.
In this state, Rect Transform set the Component Scale to 1.25 .
By the way, the color of the component is also set to light blue as the Image color when selecting.
When you're done, click the record button to stop it. You can see that the scale and Image.Color are set.
Run the game and try to get it moving. I think you can see that the scale and color change while anime when the button is selected.
The anime settings will be saved in the previously created ButtonSelected.controller , so
If you want to apply the same anime to other buttons, you can attach this file to the button and apply the same animation.
Don't forget to make the transitions anime.
Change the time of anime
The default operating time for the anime you create is set to 0.25 seconds. Whether this is early or late or just right may depend on the person.
If you want to change the time of this anime, you can do so by following the steps below.
Double-click the anime controller (ButtonSelected.controller) that you created from the project.
The anime tab is selected, and the following screen is displayed, so Any State select the line connecting and Selected .
If you expand the settings of the inspector, there is a "transition interval (s)", so this time set 0.1 it to .
Check if the anime is getting faster.