由 Airbnb 开发的 Lottie 是一个将 After Effects 动画提供给任意一个 iOS，macOS，Android 还有 React Native 原生 APP 的文件库。

这些动画通过一个叫 Bodymovin 的开源 After Effects 插件，以 JSON 文件的形式进行输出。Lottie 通过 JSON 格式下载动画数据并实时提供给开发者。

下载安装

1.首先你需要下载AE，这里就不多说了，自行下载
我一般下载adobe的软件都是通过Adobe Creative Cloud，再用工具pj。
2.下载 bodymovin, 点击view raw即可

安装插件

在windows下，用以下方式安装该插件:

解压缩bodymovin.zxp文件，到C:\Program Files (x86)\Common Files\Adobe\CEP\extensions目录下，mac用户解压到以下目录
/Library/Application\ Support/Adobe/CEP/extensions/bodymovin

配置注册表，按win+R，输入regedit打开注册表，在注册表键值 HKEY_CURRENT_USER/Software/Adobe/CSXS.6 增加一个类型为字符串(String)，键值名为 PlayerDebugMode , 值设置为 1 。

打开AE，在编辑->首选项->常规中勾选允许脚本写入文件和访问网络

安装成功后，会在AE窗口->扩展中看到bodymovin.

使用

打开一个AE文件，例如AE文件
点击窗口->扩展->bodymovin
设置好路径后，点击render即可

生成完毕后，点击preview，还可以预览

WEB应用实例

生成好JSON文件后，在html文件中
引入lottie.js，下载地址在这里

<div id="task" style="width: 300px;background-color: cadetblue"></div>

<script src="lottie.min.js" type="text/javascript"></script>
<script>
var animation = bodymovin.loadAnimation({
  container: document.getElementById('task'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'task.json'
})
</script>

注意，如果你也用的上面AE例子的话，因为该动画是白色的，所以一定要给容器设置背景颜色，要不然就会看到白茫茫一片

还有一个要注意的点为，如果在本地测试，必须要在服务器上，否则会报错，因为它需要通过网络去请求动画文件。

除了上面的方式，官网还介绍了其他引用渲染方式
不过这种方式是生成的canvas。

1	<div style="width: 300px;background-color: cadetblue" class="lottie" data-animation-path="task.json" data-anim-loop="true" data-name="test"></div>

这里有两个必需设置的东西

class要为“lottie”
data-animation-path为json路径

lottie的一些方法

官网上还介绍了其他一些方法

play
stop
pause
setLocationHref(href)
setSpeed(speed)

等等，这里不多讲啦。

方法应用小实例

在上面的基础上，做一个效果

即鼠标放上去时才动画，离开则不动画了，比较简单，涉及一些方法的应用，直接上代码。

<div id="bm" style="width: 200px;height: 300px;background-color: cadetblue"></div>
<script src="lottie.min.js" type="text/javascript"></script>
<script>
var bm = document.getElementById('bm')
var animation = lottie.loadAnimation({
  container: bm,
  renderer: 'svg',
  autoplay: false,
  path: 'task.json',
  loop: true,
                 prerender: true,
})

bm.addEventListener("mouseenter",function(){
	animation.play()
})
bm.addEventListener("mouseleave",function(){
	animation.stop()
})

好啦，基础使用就是这些了，不过Lottie虽然好用，但是并不是能转换所有的动画的，这点心里要有点数哟。

动效神器Lottie初体验——把AE动画转换成WEB原生动画

下载安装

安装插件

使用

WEB应用实例

lottie的一些方法

方法应用小实例

FEATURED TAGS