How am I supposed to use Mecanim system to animate the new UI from version 4.6?

Questions & Answers
1

Hello guys, while I was looking for how to create a transition between different screens using the new UI system I found the following tutorial:

http://docs.unity3d.com/Manual/HOWTO-UIScreenTransition.html

There it present the transition by using Mecanim and animation clips to control the Canvas parameters. While it looks pretty interesting to have access to a lot of variables with those animation curves (spinning fadeout yay), the tutorial is really poor. It lacks explanations and contains a lot of broken links. It goes through some points where it could give more details and I am with problems with the Mecanim part.

Basically I did the following steps:

  1. Create a common canvas with a simple text
  2. Open the Animation Tab
  3. Select the canvas in the scene’s hierarchy, then go to the animation tab and click on “Add Curve”
  4. Save a new .anim object to represent the canvas Opened
  5. Insert the same parameters for anchors as showed in that weird tutorial on the keyframe 0 in the animation tab
  6. Repeat steps 2-5 but with parameters of a closed canvas in a different .anim file
  7. Insert an Animator ( where I’ll insert the .controller file from step 8) on the canvas object
  8. Create a .controller with the states “Opened” and “Closed”
  9. state “Opened” receives the .anim with the opened parameters
  10. state “Closed” receives the .anim with the closed parameters
  11. Create a transition between those states

Then I press to preview the transition and nothing happens. Also sometimes when I try to manipulate the variables in the Animation tab it seems to glitch the values, some times it shows “0” from all variables defined there and other times it shows the values that I defined before.

So how should I create that animation system described in that tutorial? The words “Animation” and “UI” (thanks Unity3D team) are too generic so I couldn’t find any tutorial about it. If you know some tutorial about it please let me know? If you are part from the Unity3D staff please remake that tutorial page.

Thanks for the attention guys.

2

I solved the problem here. If you try to apply the animation to the Canvas using the Screen Space Overlay it will ignore the animation because the Canvas component controls its absolute position. Because of that also the Animator Curve variable gets an undefined behavior because it is trying to change the parameter while the Canvas parameter is doing the same thing.

So you need to apply the animation to a child-panel from the Canvas and everything will work fine, check the following site for more details.

http://www.thegamecontriver.com/2014/09/create-animated-menu-unity-46.html

Also there is a Unity3D bug in the versions older than the 4.6.2p2 where the Button’s OnClick handler will send the parameter as a null object instead of the parameter that you set in Unity3D’s object inspector.