當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

AE导出JSON数据用CSS做前端交互---kalrry

發布時間：2023/12/15 HTML 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 AE导出JSON数据用CSS做前端交互---kalrry 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

AE導出JSON數據用CSS做前端交互---kalrry

一、簡介
二、準備
三、例子
四、參考

一、簡介

關于網頁端動畫實現
web端做動畫有多種形式，可以用CSS的animation，也可以用Canvas，或者是用JS控制CSS的屬性形成動畫。我們經常使用CSS做一些比較簡單的動畫，像過度、加載的動畫，對于一些比較復雜的，可能會做成gif，或者是用Canvas，使用Canvas的控制粒度可以很細，同時工作量相對也比較大。做動畫還有其它的方式，那就是使用After Effect(AE)/Flash/Premiere(Pr)/會聲會影等視頻軟件，這種可視化的制作方式相對于直接寫代碼來說，會更容易簡單自然。做動畫本身應該使用工具進行制作，但是這種視頻軟件做出來的動畫最后都是生成視頻文件，并且通常體積還很大，沒有辦法直接移植到網頁上去。然而好消息是，現在我們可以使用AE做動畫，然后使用bodymovin插件導出成html文件進行播放。

Bodymovin實現動畫
用Adobe公司的after effect軟件做出來動畫，用Bodymovin的AE插件可以將動畫導出為json文件，bodymovin就是這個動畫json文件的前端播放器，支持渲染為svg\canvas\html三種格式。它不僅可以播放動畫，可以完全控制動畫的播放、暫停、速率、播放對應幀等等。更可以做到更改幀對象的位置。

關于移動應用動畫實現
Facebook 開源了一個類似的庫叫做 Keyframes，Keyframes是將AE動畫轉換為允許在Android和iOS設備上呈現的數據格式的庫。也是跨平臺的，但是本文介紹的 Littie 比 Keyframes 支持的特性更多。
Keyframes庫的開源地址

二、準備

AE
Lottie官方網址
Bodymovin AE Extension下載地址

官方教程
翻譯教程

Android
iOS
ReactNative

三、例子

https://codepen.io/airnan/project/editor/ZeNONO

https://github.com/ViggoZ/notification_guide_motion/tree/gh-pages

<body><div id="bm"> </div><script src="scripts/bodymovin.js"></script><script>var animation = bodymovin.loadAnimation({container: document.getElementById('bm'),renderer: 'svg',loop: true,autoplay: true,path: 'data.json'})</script> </body>

可以下載項目，自己用AE做好動畫，生成data.json和image文件之后替換項目相應位置即可運行。
注意：bodymovin的json文件在chrome中瀏覽是要有服務器環境才可以運行的，不然會報錯，本地預覽使用safari沒問題，原因未知。
bodymovin官方下載
3. https://wow.techbrood.com/fiddle/32208

四、參考

lottie 前端JSON動畫

https://facebookincubator.github.io/Keyframes/

https://github.com/panacena/LottieTest/

https://juejin.im/post/58948f1b0ce4630056f3a629

http://www.mq2014.com/after-effect-zhuan-svg-dong-hua-shen-qi-de-bodymovin-cha-jian.html

http://www.renfed.com/2017/08/06/ae-bodymovin/

https://codepen.io/airnan/project/editor/ZeNONO/

總結

以上是生活随笔為你收集整理的AE导出JSON数据用CSS做前端交互---kalrry的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。