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

AE导出JSON数据用CSS做前端交互---kalrry一、简介二、准备三、例子四、参考一、简介关于网页端动画实现web端做动画有多种形式，可以用CSS的animation，也可以用Canvas，或者是用JS控制CSS的属性形成动画。我们经常使用CSS做一些比较简单的动画，像过度、加载的动画，对于一些比较复杂的，可能会做成gif，或者是用Canvas，使用Canvas的控制粒度可以很细，同时工作量

kalrry

4939人浏览 · 2022-03-24 13:44:57

kalrry · 2022-03-24 13:44:57 发布

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/