哈喽！大家好！我是程序视点的小二哥。
前端开发中，总会遇到这样一个困境：动画还原。对于前端开发工程师，有的是这样做的。

  • 照着设计动画模仿，猜测动画时长，手创建贝塞尔曲线……
  • 调整细节耗时耗力，效果还差强人意…
  • 好不容易实现了，还原度却达不到要求

在被UI设计折磨一顿后，小二哥找到了解决这个困境的方案。它就是今天的主角：Lottie

Lottie简介

Lottie 是Airbnb开源的一个 面向iOS、Android、React Native 的动画库，能分析 AE 导出的动画（需要用bodymovin导出为json格式），并且能让原生 App 像使用静态素材一样使用这些动画，完美实现动画效果。

下面是Lottie提供的官方效果图。类似下面这种一段动画的播放，非常适合使用Lottie来做。

Lottie流程

我们先来看下整个流程简图。

设计师用AE把动画效果做出来，再用Bodymovin导出相应地json文件给到前端，前端使用Lottie库就可以实现动画效果。功能简单且强大。

至于Adobe Effect和Bodymovin插件的安装与使用…嗯嗯，这是设计师的事情，咱们就不操心啦。

Lottie使用入门

静态URL引入

调用loadAnimation

var params = {  container: element, // 容器节点  renderer: 'svg',  loop: true,  autoplay: true,  path: 'data.json' // JSON文件路径}var anim = lottie.loadAnimation(params);

vue中使用Lottie依赖安装和使用

通过NPM安装vue-lottie

npm install --save vue-lottie

vue-lottie使用

    
                
            
Speed: x{{animationSpeed}}
                                                  import Lottie from './lottie.vue';  import * as animationData from './assets/pinjump.json';  export default {    name: 'app',    components: {      'lottie': Lottie    },    data() {      return {        defaultOptions: {animationData: animationData},        animationSpeed: 1      }    },    methods: {      handleAnimation: function (anim) {        this.anim = anim;      },      stop: function () {        this.anim.stop();      },      play: function () {        this.anim.play();      },      pause: function () {        this.anim.pause();      },      onSpeedChange: function () {        this.anim.setSpeed(this.animationSpeed);      }    }  }

参数配置

也就是上面的defaultOptions属性传递配置对象：

  • container：在其上呈现动画的 dom 元素
  • animationData：一个带有导出动画数据的对象。
  • path：动画对象的相对路径。（animationData 和 path 是互斥的）
  • loop：默认值为true。可传递需要循环的特定次数
  • autoplay：true / false 它会在准备好后立即开始播放
  • name：动画名称以供将来参考
  • renderer: ‘svg’ / ‘canvas’ / ‘html’ 设置渲染器

Lottie动画监听

Lottie提供了用于监听动画执行情况的事件：

  • complete
  • loopComplete
  • enterFrame
  • segmentStart
  • config_ready(初始配置完成)
  • data_ready（所有动画数据加载完成）
  • DOMLoaded（元素已添加到DOM节点）
  • destroy

可使用addEventListener监听事件

// 动画播放完成触发anm.addEventListener('complete', anmLoaded);// 当前循环播放完成触发 anm.addEventListener('loopComplete', anmComplete);// 播放一帧动画的时候触发 anm.addEventListener('enterFrame', enterFrame);

Lottie的更多详解，请查阅下方链接。

Lottie 地址：https://github.com/airbnb/lottie-android

Lottie 官网：https://airbnb.design/lottie/

关注同名微信公众号【程序视点】，了解更多有趣、好玩的项目吧~