Cocos2d-x——CocosBuilder官方幫助文檔翻譯3 動畫

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來接收回調函數。