使用Lottie 操作JSON动画

熊羊羊
15,465 阅读3分钟

Lottie 是什么

开源面向iOS、android、Web的动画库，能分析AE，LottieFile(Figma plugins)导出的动画，并且能让原生APP像使用静态素材一样使用这些动画，完美实现动画效果。

Lottie 的优缺点

优点

  • 开发无需编写动画，只需要加载
  • Android、iOS、Web多端支持
  • 可手动设置进度，绑定事件，手势等等
  • 可网络加载，动态控制播放进度
  • 性能好，显示效果完美
  • 。。。 缺点
  • 能在AE中实现效果比较有限
  • 对AE使用要求较高，动画依赖于设计师
  • 使用位图后，资源消耗大
  • 。。。。

Lottie与GIF对比

GIF

  • 开发无法实现控制
  • 有锯齿
  • 难以维护,性能较低
  • GIF文件太过庞大
  • ...

如何使用

Lottie DOC-Web官网

Lottie预览JSON动效地址

Lottie免费动画

如何安装

// 1.使用npm安装
npm i lottie-web
// 2.使用CDN引入
<script src="https://cdnjs.com/libraries/bodymovin"></script>

加载JSON文件

// json path https://uxpinchina.com/voice.json
// index.js
const animation = lottie.loadAnimation({
  container:document.querySelector('#lottie'),
  renderer:'svg/canvas/html',
  path:'data.json',
  loop:true,
  autoplay:true,
  name:'demo',
  animationData:{}
})
  • container：用来渲染的dom元素。
  • path：AE或者Lottie导出的JSON文件路径。
  • renderer：svg|canvas|html可以渲染成三种状态
  • loop：true|false是否循环动画。 true->animation-iteration-count:infinite;。
  • autoplay：true|false是否自动播放。
  • name：动画名称。
  • animationData：JSON数据 path和animationData二选一即可。

实例方法

code.png

  • play()：启动
  • stop()：停止
  • pause()：暂停
  • destory()：销毁
  • setLocationHref(href:string)：href作为location.href，当你在Safari中遇到不带符号的掩码问题时，它非常有用
  • setSpeed(speed:number = 1)：设置动画速度
  • goToAndStop(value:number,isFrame:boolean = false)：动画跳到某个进度并停止。 value：进度数值 isFrame：定义value是基于时间true还是基于帧false
  • goToAndPlay(value:number,isFrame:boolean = false)：动画跳到某个进度并播放。
  • setDirection(direction:number = 1)：设置动画的播放顺序。正数和0：正序，负数：倒序
  • getDuration(inFrames:boolean = false)：获取动画持续事件。 true->返回以帧为单位的持续时间 false->返回以秒为单位的持续时间
  • playSegments(segments:[number,number]|[number,number][],forceFlag:boolean = false)： segments：参数指定播放帧 [form,to]，会停留在最后一个二维数组的to里面 。 forceFlag：参数表示是否立即强制播放该片段 。 false->会等待当前段完成。 true->会立即播放此段。 如： animation.playSegments([15,30],false); // 播放完之前的片段，播放15-30帧， animation.playSegments([[0,5],[10,20]]); // 直接播放0-5和10-20帧。
  • setSubframe(boolean = true)：false->将尊重原始的AE fps。true->将使用中间值在每个RequestAnimationFrame上更新。

事件

  • complete: 播放完成（循环播放下不会触发）
  • loopComplete: 当前循环下播放（循环播放/非循环播放）结束时触发
  • enterFrame: 每进入一帧就会触发，播放时每一帧都会触发一次，stop方法也会触发
  • segmentStart: 播放指定片段时触发，playSegments、resetSegments等方法刚开始播放指定片段时会发出，如果playSegments播放多个片段，多个片段最开始都会触发。
  • data_ready: 动画数据json文件加载完毕触发
  • data_fail：动画数据json文件加载失败触发
  • loaded_images：当所有图片加载成功/失败时触发
  • DOMLoaded: 动画相关的dom已经被添加到html后触发
  • destroy: 将在动画删除时触发
// animation 是一个实例对象通过lottie.loadAnimation
animation.addEventlistener('data_ready',res=>{
  // handle
  console.log('animation file has loaded');
})

动画反复播放

// 监听动画完成
this.animationLottie.addEventListener('complete', (res) => {
  // 1. 第一种 反复设置播放顺序
  // 获取到播放顺序
  const dir = this.animationLottie.playDirection;
  // 设置播放顺序
  this.animationLottie.setDirection(dir === 1 ? -1 : 1);
  this.animationLottie.play();
  // 2. 播放指定帧, 顺序倒过来
  // 获取到动画总时长
  // const duraction = this.animationLottie.getDuration(true);
  // this.playSegments(this.direction === 1 ? [duraction, 0] : [0, duraction]);
});

Github代码示例

Lottie demo

lottie.json

lottie.json关键字

  • ip：起始帧
  • op：结束帧
  • w：宽
  • h：高
  • v：版本
  • fr：频率/帧率
  • ddd
  • nm
  • tiny
  • fonts：字体
    • list
      • fontConfig
  • asset：资源
    • assetConfig
      • id
      • w：宽
      • h：高
      • u：路径
      • p：名称
      • e
  • layers：图层
    • layerConfig
      • st：开始帧
      • ip：起始帧
      • op：结束帧
      • nm：名字
      • ind：图层id
      • ty：图层类型
      • ks：动画
      • shapes：图形

喜欢作者可以为我打赏

微信图片_20210416111244.jpg

avatar
文章
阅读
粉丝