• Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
  • Help Room /
avatar image
0
Question by cgbrown-mos · Oct 21, 2016 at 05:56 PM · animationui imagemechanimfadeoutfadein

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:

  1. 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).

  2. The current Image (Start) and the new Image (Load) should never be showing at the same time.

  3. 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: Mechanim Graph

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. Mechanim Simple Graph

Thank you!

mechanim-graph.png (82.3 kB)
mechanim-graph-simple.png (29.6 kB)
Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

0 Replies

· Add your reply
  • Sort: 

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Welcome to Unity Answers

The best place to ask and answer questions about development with Unity.

To help users navigate the site we have posted a site navigation guide.

If you are a new user to Unity Answers, check out our FAQ for more information.

Make sure to check out our Knowledge Base for commonly asked Unity questions.

If you are a moderator, see our Moderator Guidelines page.

We are making improvements to UA, see the list of changes.



Follow this Question

Answers Answers and Comments

139 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

What's the easiest way to fade a sprite in? - Looking for equiv of jQuery's fadeIn() 0 Answers

Animation Not Playing 0 Answers

How to animate a RawImage in UI with a series of PNG files?,How to animate a Raw Image in UI with a series of seperate PNGs? 1 Answer

Except for Rigging in Blender, is learning animation in Blender useless since Unity has its own animation system. 1 Answer

Can I make a dynamic wave ui with shader ? 0 Answers

  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges