快速讓團隊預覽bodymovin的方法

bodymovin生成和上傳預覽的方法,以後給大家講解怎麼做個bm動畫。

大家在用bodymovin的時候，是不是要生成一個bodymovin的資料夾，裡面有json和html，也許還有個image。這時候你需要把這些傳給領導預覽，或者發給前端上傳到網站裡給個ip讓領導預覽。如果領導覺得不ok又得再給再傳，其實大可不必，都智慧辦公時代了，不用那麼OUT了。

不過前期我還是普及一下bodymovin的使用方法。首先你得有個after effects,不知道的去adobe的官網下載 ofollow,noindex">https://creative.adobe.com/products/download/aftereffects?promoid=RYGDN4F6&mv=other

然後去下載個 b odymovin外掛，這是 漢化版 的，當然你還得下一個 zxp安裝器

安裝好後就大功告成了。

再跟大家講解一下bodymovin生成的是網頁動畫，我直接用gif不就可以了嗎？首先GIF是動畫圖片，載入起來也非常卡，體積也非常大。一個高清的gif圖片大概都是2M左右起步，但是bodymovin生成的json體積非常小，只有幾百kb左右，讀取速度要比圖片快的多。生成的json我們可以直接讓前端去編輯，如果是gif的話，修改某一個顏色，還得交給設計師去返工，然後生成後再次釋出壓縮，這個流程咋說也得分鐘計算吧，如果是修改json就按秒計算了。

安裝好外掛後，在AE裡啟動bodymovin這個外掛是不是上面這個樣子，如果是那就說明安裝OK了，就差生成了。

點選render渲染，外掛就開始自動生成了。然後點選那個路勁地址就進入那個地址，一般會生成1個json檔案，這說明說明你使用的是向量圖形。如果動畫裡有畫素圖片的話，他會自動生成個image的檔案，裡面就存放著圖片。想看效果直接點選那個html就可以了。交給前端開發把這個打包發過就可以了，那麼下面，我教大家怎麼把這些上傳到木殼子裡，因為木殼子裡可以實時預覽和下載。

在木殼子小組裡選擇動畫設計上傳分類“動畫設計”裡的"AE網頁動畫"，然後選擇Json檔案，上傳成功後就可以欣賞了。

如果你碰到以下情況，顯示不出圖片來，不要急。說明你的bodymovin外掛生成了一個image的檔案，你只要點選左上角“上傳匹配按鈕”，把image裡的圖片上傳上去，那麼就能觀看了。

那麼你把所有的設計元素都上傳上去後，前端人員只需要下載就可以了，領導又能直接預覽，是不是很方便。