1. 程式人生 > >移動APP 秀場、直播動畫效果實現方案

移動APP 秀場、直播動畫效果實現方案

轉自 http://blog.csdn.net/hard_man/article/details/51222423

專案介紹

專案名稱:FlashAnimationToMobile 原始碼。  使用方法點這裡

這是一個把flash中的關鍵幀動畫(不是序列幀)匯出,然後在iOS/Android原生應用中解析並播放的一個外掛。除了原生App,它也能夠支援Cocos2dx(3.x)。

對於Flash軟體,則支援Flash CS3及以上版本及最新的Animate CC。

這個庫能夠滿足遊戲,App開發中90%的2D動畫需求。 
它可以用來做遊戲中的人物動畫:走動,攻擊,跳躍,閃避等,以及UI特效,升級,轉場等。 
也可以用於App動畫:秀場禮物,使用者升級,活動禮包,等等。

這個庫目前已在3個線上專案(2個遊戲,一個App: android+iOS)中使用了。 
它最大的特點就是:原生,關鍵幀動畫。

實際效果如下:

  • flash: 

  • iOS: 

  • android: 

  • cocos2dx: 

專案來由

最開始有把flash關鍵幀動畫匯出的想法是當初做cocos2dx開發遊戲的時候。 
當時開發的一個遊戲專案,模仿《刀塔傳奇》的動畫樣式和戰鬥模式。 
瞭解的朋友應該知道,《刀塔傳奇》裡面有很多英雄,每個英雄都有很多個動作。 
一般情況下,這種複雜動畫應該避免使用序列幀動畫(對記憶體要求高),而應該用更高效的關鍵幀動畫。 

而當初立項的時候,專案組的美術人員對flash比較熟悉,希望用flash來做各個英雄的動畫。更能節約時間。 
而cocos2dx當時還不能直接匯入flash動畫。 
於是,作為程式的我,就需要查閱各種資料,想解決方案。於是就有了這個專案。

我們的遊戲當初45個英雄,每個英雄9個動作,全部使用flash製作,並用這個庫來播放動畫。同屏20個英雄,無卡頓完美執行。

看下我們遊戲製作的flash原圖: 

過了一年,我的主要工作從遊戲轉移到app。現在是在做秀場專案。 
後來大家覺得送禮物的特效不夠炫,希望手機端送禮物時也能夠有網頁版的那種效果。 

於是我就產生了把這個cocos2dx的動畫庫,移植到iOS和android中的想法。就是今天介紹的這個專案了。

用這個動畫庫來播放美術人員做出來的flash特效作為秀場禮物動畫。可令禮物豐富多彩,不再單調。

程式碼實現及功能範圍

程式碼分為兩部分:

1. flash/python指令碼
2. 各平臺(iOS/Android/cocos2dx)解析庫。
  • 其中flash指令碼的部分參考的是這幾篇文章: 
  • python指令碼是為了把json資料(.flajson檔案)轉換成二進位制資料(.flabin檔案),進一步縮小檔案體積,同時帶有一定的加密效果。 
    • 其中cocos2dx的專案只支援二進位制格式,Android和iOS版本支援json和二進位制格式。
    • 二進位制格式的檔案大小要比json格式小10倍左右,載入速度也比json快。

當初在cocos2dx中做程式實現的時候,我是完全把flash的執行機制在cocos2dx中複製了一遍。 
其中包含了,元件,層和關鍵幀的概念。 
到後面移植App的時候,我的思路發生了變化,我覺得把層的概念淡化,然後在任何一幀,把不同層的圖片同時繪製。這種思路可能更簡單一些。 
所以App的程式碼實現邏輯,同cocos2dx版本的程式碼有一定的區別。

專案中的程式碼是最簡單的能夠使用的版本,功能和限制如下: 
- 只能用圖片,不能用向量圖 
- 只能使用如下屬性:位置,縮放,旋轉,切變,顏色疊加,透明度變化。 
- cocos2dx版本計算content size的部分沒有實現。 
- app版本我為不同解析度手機做了適配,但是沒有編寫計算其size的方法,因為我沒有用到。 
- 上述兩點如果有這種需求,則需要自行新增這部分程式碼

雖說簡單,但是這個庫已經能夠滿足90%的相關需求了。

如果感興趣,可以通過閱讀資料,為其增加向量圖,濾鏡,遮罩等功能。這些都是可以實現的。

我在程式碼關鍵部分都加了註釋。感興趣的可以圍觀一下。幫忙指出錯誤。

FlashAnimationToMobile 點此進入