Lottie--a marvelous library

Lottie – a marvelous library

References：

核心动画系列(四): Lottie 的使用:这篇文章有很多资源可以借鉴

lottie系列文章(一)：lottie介绍：一系列文章都建议看一下

大杀器Bodymovin和Lottie：把AE动画转换成HTML5/Android/iOS原生动画

简介

Lottie是一个库，可以解析使用AE制作的动画（需要用bodymovin导出为json格式），支持web、ios、android和react native。在web侧，lottie-web库可以解析导出的动画json文件，并将其以svg或者canvas或者html的方式将动画绘制到我们页面中。

lottie应用

• 采坑点：直接用Lottie库的时候定义好path，发现react中会报错，查看源码发现用path的时候xhr发送get请求，导致出现奇怪的responseText报错,所以如果json在本地，建议直接用animationData传参即可；
• 如果用path引入json数据：只引入文件夹默认去找的是data.json(这个看下源码就知道了
• react中使用推荐：react-lottie组件，方便快捷
• 我的lottie demo:https://github.com/LynnWonder/dva-router-demo

冷门？的使用点

lottie的一个additional method: updateTextDocumentData
wiki如下：
https://github.com/airbnb/lottie-web/wiki/TextLayer.updateDocumentData

1. 使用前提
   使用前提是UI已经从AE导出动画的时候把glyphs也导出了(看composition settings里面只要勾选glyphs就可以了)glyphs：创建，制作，发布为所有人编辑字体
2. 使用方法：
   参考wiki用法即可；

react-lottie一些介绍

1. 给传入lottie.loadAnimation的dom节点添加 role=‘button’，默认情况下点击停止动画播放，该属性可以通过

isClickToPauseDisabled=false//默认为false，即点击动画停止播放

2. react-lottie存在缺陷，只封装了8个Lottie的全局方法，没有封装updateTextDocumentData ，我在我的demo里进行了封装，详情可以看我的demo：https://github.com/LynnWonder/dva-router-demo

Lottie demo

除了官方提供的demo，还推荐以下demo：

https://github.com/skillnull/Lottie-Web-Caption-Animation这位展示了直接操作动画文本的一种方式.即上面的冷门使用点中的内容

https://github.com/chenqingspring/react-lottie：这是react-lottie作者提供的demo