- Home /
How do you animate a UI element from top to bottom of the screen?
Using the new UI system, I want to animate a panel from the top to bottom of the screen, no matter what the screen size is. How do I do this?
Answer by awesomedata · Dec 24, 2014 at 08:36 PM
You'd use the animator component on the top-level of the panel hierarchy to animate the anchors, while keeping the UI panel stretched to fit.
The process (if I remember exactly) is as follows:
1) Stretch panel to fit the canvas area before recording your animation.
2) Move the playhead position to, say, 3 secs.
3) Then make the window stretch horizontally only.
4) Now move the panel upward offscreen and put the pivot on its bottom-center edge.
This should automatically make a keyframe on the start playhead position for you and auto-animate the pivot and anchors to where they'll be offscreen initially. You can swap the keyframe sequence around too if you want it to start offscreen (and/or just set the state speed to -1 to play it backwards).
Just recalling this from memory, but that's the gist of how to do it. Even if it's not 100% step by step, you'll figure it out if you play with those steps long enough.