koobas.hobune.stream
How do I use Mechanim to animate UI Image fade in and fade out?
Hi!
I am looking for some suggestions for the best way to use Mechanim to animate the fade-in and fade-out between 3 UI Images. I will refer to them as Start, Load, and Info.
I have the following conditions that I need to meet:
When the current Image is showing (for example: Start) and some event happens, I want the current Image (Start) to fade to black, then have black fade to the new Image (for example: Load).
The current Image (Start) and the new Image (Load) should never be showing at the same time.
The fade from the current Image (Start) to the new Image (Load) cannot be interrupted, it must play through completely before making another transition (for example: to Info).
I currently have this set up with a bit of a mess: 
In this graph, Start, Load, and Info represent the state where their respective Image is showing and all others are hidden. This is done using an animation clip with one key-frame, where the alpha on the shown Image is 1 and the alpha on the hidden Images are 0.
When the parameter state is changed, it triggers the transition to a new state where an animation is played to fade out the current image and fade in the new image. When the animation is finished, it uses the "has exit time" to transition to the next state which is either Start, Load, or Info... the states which play an animation of 1 key-frame at constant value.
This approach is based on this post I found here: https://www.reddit.com/r/Unity3D/comments/32mzfz/best_practices_for_implementing_simple_ui/cqcsjed/
Clearly, this approach becomes very inefficient and time consuming to implement when there are many more images to transition to.
Does anyone have any better suggestions on how to do this with Mechanim?
Please note, I also tried a similar approach where I had 1 animation controller per Image instead of 1 controller for all 3. This did not work correctly, sometimes both images would show at the same time, as if they controllers were not in sync. 
Thank you!
