Working with Animations

动画

You can use CocosBuilder for creating character animations, animating complete scenes or just about any animation you can imagine. The animation editor has full support for multiple resolutions, easing between keyframes, boned animations and multiple timelines to name a few of the features.

你可以使用CocosBuilder创建角色动画，场景动画或者其他一些动画。动画编辑器完全支持多分辨率，动画关键帧，骨骼动画以及多条时间轴等功能。

The Basics

基础

In the bottom of the main window you can find the timeline. You use the timeline to create your animations.

在下图中你可以看到时间轴，你可以使用时间轴来创建你的动画。

By default your ccb-file has a single timeline that is 10 seconds long. CocosBuilder edits animations at a frame rate of 30 frames per second, but when you play back the animation in your app it will use whatever you have set cocos2d to use (the default in cocos2d is 60 fps). The current time is displayed in the top right corner, and has the format minute:second:frame. The blue vertical line also shows the current time. Click the time display to change the duration of the current timeline.

默认情况下你的ccb文件仅有一条长为10秒钟的时间轴。Cocosbuilder以每秒钟30帧的速率编辑动画，但当你的你的应用中播放动画的时候，动画将以你在cocos2d中设置的速率播放（默认是60fps）。当前的时间在右上角显示出来，格式为分钟：秒：帧。蓝色竖线也显示了当前的所在的时间。点击上方的时间显示（水平进度条）来改变当前时间轴单位时间之间的距离。

Adding Keyframes

添加关键帧

Animations in CocosBuilder are keyframe based. You can add keyframes to different properties of a node and CocosBuilder will automatically interpolate between the keyframes, optionally with different types of easing.

CocosBuilder中的动画是以关键帧为基础的。你可以为节点的不同属性添加关键帧，CocosBuilder会自动地在关键帧中插入不同类型的过渡效果。

To add a keyframe, first expand the view of the node by clicking the triangle to the right of the name of the node. This will reveal all the animatable properties of the node. What can be animated varies slightly depending on what type of node you have selected. Once the properties are visible you can click the property in the timeline with the option key held down. This will create a new keyframe at the time of the click. Alternatively, you can create a new keyframe at the time of the time marker by selecting a node then choosing Insert Keyframe in the Animation menu.

首先通过点击节点名称左边的小三角展开节点。这将把节点中所有可制作动画的属性展现出来。根据你所选择节点类型的不同，可以制作成动画的属性会有少许不同。按住键盘上的option键，点击时间轴上的属性，这将在你当前点击的时间点上建立一个关键帧。或者，选中节点后，你可以通过Animation菜单中的Insert Keyframe（插入关键帧）子菜单来创建一个关键帧。

Keyframes are automatically added at the current time if you transform a node in the canvas area, given that the transformed property already has one or more keyframes in the timeline.

如果你在画布区域对节点进行变形的操作，那么在当前时间点会自动创建一个关键帧。

Editing Keyframes

编辑关键帧

You edit a specific keyframe of a node by moving the time marker to the time of the keyframe and selecting the node. You can focus on a keyframe by double clicking it (which will select the node and move the time marker).

如果你要编辑一个关键帧，你要先选中节点，然后把时间标记移动到关键帧的时间点上。你可以通过双击一个关键帧把它设置为焦点（这个操作会选中节点并移动时间轴）。

You can select keyframes and move them together by dragging a selection box around them. You can also copy and paste keyframes between nodes. Make sure you only have one selected node when pasting the keyframes. The keyframes will be pasted starting at the time of the time marker.

你可以把关键帧进行框选后一起移动。你还可以在节点间拷贝粘贴关键帧。当你粘贴关键帧的时候，确保你只选中了一个节点。

If you have selected a set of keyframes it is possible to reverse the order of them by selecting Reverse Selected Keyframes in the Animation menu. Use the Stretch Selected Keyframes… option to speed up or slow down an animation by a scaling factor.

如果你选中了一组关键帧，那么你可以通过Animation菜单中的Revert Selected Keyframes（反转选定关键帧）子菜单来把它们的顺序反转。通过Stretch Selected Keyframes…（拉伸选定关键帧）子菜单来加速或者减缓你的动画（通过输入缩放系数）。

Importing a Sequence of Images

导入一系列图片

If you have an animation created by sprite frames it can be tedious to move each individual frame to the timeline. CocosBuilder simplifies this process by automatically importing a sequence of images. Select the frames that you want to import in the left hand project view, then select a CCSprite in the timeline. Now choose Create Frames from Selected Resources in the Animation menu. The frames will automatically be created at the start of the marker. If you need to slow down the animation, select the newly created keyframes and use the Stretch Selected Keyframes… command.

如果你的动画是通过一组精灵帧实现的，你可以把每一个单独的帧拖放到时间轴上去，但是CocosBuilder简化了这个过程，你可以一口气导入一系列图片资源。在左侧的项目视图中，选择你想要导入的一系列动画帧的资源图片，在时间轴上选择CCScprite（精灵），然后在Animation菜单中选择Create Frames from Selected Resources子菜单，这些帧会自动地在时间点的起始位置创建。如果你想放慢动画，选择刚刚创建好的关键帧并使用Stretch Selected Keyframes…子菜单来达到这个效果。

Applying Easing

使用关键帧过渡

CocosBuilder offers a carefully selected subset of the easings provided by cocos2d. To apply an easing right click between two keyframes and select the type of easing that you want to apply.

CocosBuilder提供了精心挑选的一组cocos2d的过渡（Easing）效果。在两个关键帧中点击右键然后选择你想要的过渡效果。

Some of the easings have additional options, after the easing has been applied you can right click again and select Easing Setting… from the popup menu.

有一些过渡效果有一些额外的参数，使用过渡效果后你可以再次右键点击并从弹出菜单中选择Easing… Setting（过渡设置）。

Using Multiple Timelines

使用多条时间轴

A very powerful feature of CocosBuilder's animation editor is the ability to have multiple timelines in a single file. You can name the different sequences and play them back from your code by using their name. It's even possible to smoothly transition between the different timelines.

CocosBuilder动画编辑器一项最为强大的功能是在一个文件中使用多条时间轴。你可以为不同的序列命名并在你的代码中通过这个名字来调用这个动画。更牛X的是你可以在不同的时间轴间实现无缝过渡。

To select, add or edit your timelines use the timeline popup menu:

在时间轴的弹出菜单中选择：添加或者是编辑你的时间轴：

In the edit timelines dialog you can get an overview of your timelines, rename them, add new ones and (optionally) set one of the timelines to automatically start playback directly when the ccbi-file is loaded by your app.

在编辑时间轴的对话框中，你会看到你的时间轴的概要信息，你可以重命名，添加一个新的时间轴或者指定其中一个时间轴作为当ccbi文件加载时自动播放的时间轴。

Properties in timelines that do not have keyframes set share their values across timelines. E.g. if you move one node in one timeline it will be moved in all timelines as long as they do not have a keyframe set for the position property. It can sometimes be useful to add a single keyframe to a property just to override the shared value for a specific timeline.

如果一个时间轴的属性上没有设定关键帧，那么它就会被其他时间轴的关键帧所影响，比如：如果你在一个时间轴里移动了一个节点，它也会在所有没有定义位置关键帧的时间轴里面移动。你可以通过给一个时间轴设定一个单帧来避免被其他时间轴的关键帧所覆盖。

Chaining Timelines

链接时间轴

You can automatically play back a sequence of timelines by chaining them. You can also use this feature for automatically looping a timeline.

你可以把多条时间轴链接起来并播放。你也可以利用这个功能来自动地循环播放一条时间轴。

To have a timeline play in sequence, click the No chained timeline text and select the timeline you want to play right after the current one.

如果要使用链接时间轴的功能，点击No chained timeline（无链接时间轴）文字并选择当前时间轴结束后你想继续播放的时间轴。

Playing Back Animations in Code

在代码中播放动画

To programmatically control the animations you create with CocosBuilder you will need to retrieve the CCBAnimationManager. The animation manager will be assigned to the nodes userObject when the ccbi-file is loaded.

为了让CocosBuilder创建的动画在你的代码中播放，你需要使用CCBAnimationManager。在ccbi文件加载时，动画管理器会被指定给userObject节点。

CCNode* myNodeGraph = [CCBReader nodeGraphFromFile:@"myFile.ccbi"];

CCBAnimationManager* animationManager = myNodeGraph.userObject;

The animation manager will be returned as an autoreleased object. To play back a specific timeline call the runAnimationsForSequenceNamed: method. If a timeline is currently playing it will be immediately stopped when calling this method.

动画管理器会返回一个自释放的对象。调用runAnimationsForSequenceNamed:方法来播放一个指定的时间轴。如果一个时间轴已经在播放了，它会被立即停止。

[animationManager runAnimationsForSequenceNamed:@"My Timeline"];

Optionally, you can use a tween duration to smoothly transition to the new timeline. Where possible linear interpolations will be used for the transition.

或者你也可以使用tweenDuration参数平滑地过渡到一个新的时间轴。

[animationManager runAnimationsForSequenceNamed:@"My Timeline" tweenDuration:0.5f];

It is also possible to receive a callback whenever a timeline has finished playing. You will receive these callbacks even if another timeline is chained in sequence. Use the CCBAnimationManagerDelegate to receive the callbacks.

还可以为时间轴播放完毕时设定一个回调函数。就算有另外一个时间轴被链接起来，你还是可以使用这些回调函数。使用CCBAnimationManagerDelegate来接收回调函数。

class Playground: public CcbBase {
private:CCNode* monster;
public:CCB_STATIC_NEW_AUTORELEASE_OBJECT_WITH_INIT_METHOD(Playground, create);Playground():monster(NULL) {}virtual ~Playground() {CC_SAFE_RELEASE(monster);}bool onAssignCCBMemberVariable(cocos2d::CCObject * pTarget, const char * pMemberVariableName, cocos2d::CCNode * pNode) {CCB_MEMBERVARIABLEASSIGNER_GLUE(this, "monster", CCNode *, this->monster);return NULL;}virtual cocos2d::SEL_MenuHandler onResolveCCBCCMenuItemSelector(cocos2d::CCObject * pTarget, const char * pSelectorName) {CCB_SELECTORRESOLVER_CCMENUITEM_GLUE(this, "onAttack", Playground::onAttack);return NULL;}void onAttack(cocos2d::CCObject *pSender) {CCLOG("attacking");CCBAnimationManager* animationManager = (CCBAnimationManager*)monster->getUserObject();animationManager->runAnimationsForSequenceNamed("attack");  //播放attack动画}};