DragonBones & After Effects

圖片來源:Dragon Bonesgoogle圖片

在上一篇(骨架動畫DragonBones)內容介紹過核心功能與操作過程,本篇將陸續分享操作使用,同時簡略與Adobe After Effects比較兩者之間,同為動畫製作軟體,對於設計研發人員是否能有共同的應用需求。

DragonBones操作分享

網格怎麼佈局?
在圖形中加入網格,需要順著圖片紋理去製作,那什麼是圖片紋理呢?使用下列幾張圖形範例,說明該怎麼佈局網格;需要注意的是,網格黃線在執行動作/變形時優先於白線。
1.在製作分件圖檔時,需要把圖檔缺口完整填補起來。
2.順著輪廓設置網點(下圖藍點),在主要部位使用網格黃線(下圖紅點範圍),紅點權重大於藍點。

網格佈局


骨架與網格該用在哪裡?
1.骨架:需要執行動態線、有運動規律的人事物時使用,利用骨架設定動作,可在動畫模式下節省不少製作時間。
2.網格:
-可以是輔助性質的工具,動畫中不一定只有主角,對沒有綁定骨架的周邊元素進行動畫/變形,如落葉、揚起沙塵;運用在動畫細節上,如眨眼、微變形等等。
-與骨架系統並用,骨架可綁定網點並分配權重,讓平面圖形達到立體效果;單一骨架可綁定數張圖片。

純網格動畫
多重骨架動畫
圖示動畫
文字動畫

DragonBones導出

圖片格式 
可導出GIF動畫圖檔類型,但缺點非常多,色彩會有所損失、圖檔的畫幀無法像原設定畫幀一樣多,嚴重可能會導致動作遺失、導出時間攏長與較難控制導出的結果。檔案內的每個動作會各別導出為單張GIF檔。

gif格式

網頁
網頁方式導出為為html檔,可直接使用網頁開啟展示檔案,使用右側欄選項預覽所有動畫效果,與調整預覽模式等等(如切換動畫、動畫速度、切換背景等等);執行時不需要安裝任何瀏覽器外掛,比較像是官方提供的預覽平台,需要另外拖曳json檔與png圖檔進入網頁(早期版本可直接開啟預覽)。

html預覽發佈

動畫數據+紋理 
可選擇不同的數據格式,如json、egret、spine,加上可選擇不同版本,看著看著都眼花了,其中 egret二進制數據適合運用在遊戲中,使效能更好,並無法再對動畫進行二次編輯,能防止竄改(另外神奇的是DragonBones所導出的所有數據格式是無法在 spine中編輯的 )。 

導出json數據,檔案共包含xxx_ske.json(骨架數據)、
xxx_tex.json(圖片數據) 、 xxx_tex.png(圖片紋理), 需要特別注意的是,若最終導出需為json數據,則原始檔案中所有圖層命名,皆使用英文命名較理想,否則導出json數據格式可能會出現亂碼。

可選擇圖片(紋理)導出的大小(最小僅支援到512×512)、檔案數量等相關設定,建議使用透明背景; json數據與網頁發佈為新版本添加功能。

json格式

DragonBones 骨架動畫如何在網頁中使用

json數據直接使用在html頁面是可行的,但對於完整運作方法,目前還是處於研究狀態,以下是強大的網路案例分享:

對於DragonBones所導出的json數據運用在html中,前者是將數據直接寫入頁面,並用js控制匯入樣式;後者是將數據宣告成為canvas,數據皆由外部讀取,在html架構上簡潔。

After Effects

對於after effects的認識,基本是用於圖形動態、與視覺特效處理兩大面。圖形動態是將向量的各種矩形做動態變化,從簡單的線條動畫到複雜的人物動作皆可製作;視覺特效是運用內建的2D/3D工具來強化原有的動畫、影片。

製作動畫的概念類似“圖層”的編輯,複雜度越高的動畫,圖層數也相對會提升,類似“時間軸”工具;無論是影片、圖像、音訊都是獨立圖層,更可自由分類(因為可以匯入不同媒體元素來合成,所以在檔案/圖層分類上必須有好的控管工具),類似自家的photoshop圖層區。

並有強大的外掛輔助,當需要產出什麼成果,就去找相關的外掛來裝配,例如圖示或自然效果等等。shutterstock相關文章分享

After Effects 動畫如何在網頁中使用

參考第三方套件,codepen的kittons分享,讀取外部數據,使用js控制動畫樣式,將動畫宣告為svg,如使用該套件欲變更其它動畫,只需要將“index.js”中,path的路徑修改即可(json檔)。

codepen測試結果

結論

  • After Effects的應用需求
    1.在看過lottiefiles這些成果之後,可利用After Effects導出的json檔案直接呈現在網頁上,對於設計者製作動態icon、logo來說,是一個既方便又快速的產出管道,成果是可大幅增加對網頁、app的介面體驗。
    2.對剪輯、合成也是一大重點,就算是只用罐頭(外掛效果),也能製作出不錯的特效影片。
  • DragonBones的應用需求
    1.骨架系統在動作調整上具有一定優勢,在製作複雜的圖面與紋理時,可更快產出成果,介面操作也比After Effects簡單,適合製作表情符號、宣傳廣告圖片。
    2.相同的裝配圖檔,可重覆編輯無限個動畫效果。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *