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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM