I spent this week working on getting ABB Training Day its own buttons instead of the microsoft buttons that were in the project. I animated these buttons and gave unique animations to the icons in these buttons.
Button Concept
I started off as usual with creating concepts from ideas and seeing what worked well and what didnt visually. I spent some time checking color schemes and what button styles are popular at the moment. I went for a flat colored button style with reversed colors when it is focused on, and then a solid color all over for being selected.
I sourced the icons and sized them all to an appropriate size. I colored them all white for use in unity. With this we can easily change their colors through the animator or scripting. I also separated some parts for use with animations.
Button Creation and Animation
I created the button layout in unity with canvas' and panels. I used a text object and image for an icon. I had this created from the Microsoft button object so as to take most of the functionality from that and ensure there was no difficulties with applying the button to the project. The button has a rectangular 3d mesh behind it for better look in Augmented Reality.
I animated the button for each of the button states; normal, focused and selected. I set up the animator to cycle through all of these and handled the transitions differently for each. From these i also set an event in the focused animation. This sets an icon animator to true and allows an icon animation to start.
Icon Animation
I went about animating all of the icons individually. Each has a fitting animation and helps the button have a bit more responsiveness. It looks very clean but took some time to do. The animators all had to be set up individually as well and is the only more manual issue when setting up the buttons. I will fix this at a later date. The icons are animated only when they are being hovered over. Icon animations are stopped and the normal state set when the button is selected or not being focused anymore. This had to be done via script as the animator plays through the last animation before switching normally which did not look clean.
Icon broken into separate components to animate
From a technical view, the animator from the icon button has an event that triggers a method for turning on icon animations and also another event for turning them off. The event sets a Boolean called "shouldAnimate" in all animators in the children of the button to true or false. The icon animators are counted in this and once the Boolean should animate is set to true, they transition into the animation for animating the icon. The transitions are set to be 0 in length so as the animation starts and stops instantly. This is because UI response should be instant and not delayed in any way.
Icon animator
Icon animation transition (has exit time unchecked = no transition)
Conclusion
I set up a button prefab with example animation and text but not a prefab for each button. I did not implement this myself into the project as I did not want to mess with the button functionality already there.
Issues
No big issues this week. I have thought of a better way of using the animator for icons that I could implement at a later date however its working as is right now.