前言

最近在優(yōu)化動畫，看了不少關(guān)于AE的妙處。它不僅可以避免使用序列幀時丟幀的問題，也不用擔(dān)心AE導(dǎo)出的GIF文件的各種扭曲，還能降低開發(fā)成本，讓開發(fā)者直接使用。下面就給大家介紹一下交互設(shè)計師如何配合開發(fā)者將AE動畫轉(zhuǎn)化為HTML5//iOS原生動畫。

我找過各種相關(guān)資料，但大多把設(shè)計師部分和開發(fā)人員部分混在一起了，但作為一個UE代碼新手，整個流程看得一頭霧水，只能請開發(fā)人員一起學(xué)習(xí)，他們各司其職，各有所長才能更快產(chǎn)出，因此我把設(shè)計師負(fù)責(zé)的步驟抽出來，詳細(xì)講解一下，如果已經(jīng)看懂了可以直接跳到文章最后看步驟總結(jié)

它是什么

它是一個可以應(yīng)用于iOS的動畫庫，使用插件解析Adobe After動畫并導(dǎo)出為json文件，通過移動端原生方法或者通過React渲染矢量動畫。

其實(shí)設(shè)計師只需要用AE設(shè)計好動畫，用提供的插件把設(shè)計好的動畫導(dǎo)出成json格式，然后把這個文件給開發(fā)者就可以了，剩下的就交給全能開發(fā)者就可以了，中間可能會出現(xiàn)動畫速度或者色彩相關(guān)的問題sketch導(dǎo)入ai，建議設(shè)計師在AE里調(diào)整好再導(dǎo)出。

具體步驟如下：

1. 首先，確定需要動畫的整體圖像

2.如果圖片只是簡單的形狀，可以直接在AE中用筆畫出來；如果是比較復(fù)雜的圖片sketch導(dǎo)入ai，可以用工具導(dǎo)入到AE中，選擇所有需要導(dǎo)入的圖層，到“-”處點(diǎn)擊“復(fù)制”

3.打開AE，點(diǎn)擊“文件-腳本-運(yùn)行腳本文件…”，在上面的插件中找到“.jsx”，點(diǎn)擊“打開”，就會看到AE中的操作面板，點(diǎn)擊右邊的紅色，將復(fù)制進(jìn)來的圖層全部導(dǎo)入（如果運(yùn)行過這個腳本，下次打開AE的時候可以在“窗口”菜單下方看到“.jsx”）

4.在AE中設(shè)計動畫。動畫設(shè)計好之后，需要安裝配套的插件（After的一個插件，可以把動畫導(dǎo)出為json數(shù)據(jù)格式使用）。以下鏈接是西西大神翻譯的中文版以及原文安裝過程：

5、在AE中，進(jìn)入“窗口-擴(kuò)展”找到安裝的插件，按照下面的步驟將動畫導(dǎo)出為json數(shù)據(jù)格式。

6.最后一步就是將json文件發(fā)送給開發(fā)者，配合開發(fā)者調(diào)整一些細(xì)節(jié)，等待最終結(jié)果被接受。

補(bǔ)充

另外官方對于動畫中包含圖片的資源導(dǎo)出已經(jīng)單獨(dú)給出了方法，其實(shí)總結(jié)一下按照上面的步驟就可以提前把圖片集成到j(luò)son文件中，為后期的開發(fā)者省去很多的開發(fā)工作。

概括起來，可以分為以下幾個步驟：

1.如果是設(shè)計圖，可以用上面提到的工具導(dǎo)入AE；如果是AI設(shè)計圖，直接導(dǎo)入AE就可以了

2. 使用導(dǎo)入的圖層在 AE 中創(chuàng)建動畫

3.然后通過插件輸出json文件

4.將json文件發(fā)送給開發(fā)者

希望這些對大家有幫助，有問題可以留言，后續(xù)我會更新互動體驗(yàn)。

如有侵權(quán)請聯(lián)系刪除！