Developers Manual > Cocos Studio > UI Editor > UI Editor Workspace > UI Editor Animation Frame Panel

UI Editor Animation Frame Panel

Overview

You should switch to the Animation Mode to edit animations. When you complete the editing, you can switch back to the Normal Mode for editing the animation’s layout.

Functionality

Frame Operation

* Add Frame
# From the above picture, we can see that when you launch a context menu to add a keyframe, CocoStudio adds a small gray ellipse flag to indicate the keyframe.
# You can also add a keyframe by clicking the top left button.
* Delete Frame
As shown in the above picture, when you delete a keyframe from the context menu, CocoStudio deletes the small gray ellipse flag.
* Adjust Frame
Select the gray ellipse flag to adjust your keyframe’s position.

Play Animation

  1. Play Animation: Plays the currently selected animation.
  2. Stop Animation: Stops the currently selected animation.
  3. Add keyframe: Select the location where you want to add a keyframe, then click the left-mouse button to add a keyframe..
  4. Loop animation: Plays the animation in a loop.
  5. Frame playing time interval: You can set the time interval to change the speed of the playing animations.
  6. Which frame does your mouse point at: Shows which frame your mouse points at to help users add the keyframe more accurately.

3-2-5-img-01.png (11 kB) hanrea@qq.com, 2013-12-02 09:35

3-2-5-img-02.png (17.6 kB) hanrea@qq.com, 2013-12-02 09:35

3-2-5-img-03.png (48.9 kB) hanrea@qq.com, 2013-12-02 09:35

Sign up for our newsletter to keep up with the latest developments, releases and updates for Cocos2d-x.