Lottie-页面动画100%硬核还原

程序员老鱼

发布于 2022-12-02 09:59:43

1K0

发布于 2022-12-02 09:59:43

文章被收录于专栏：前端实验室

大家好,我是前端实验室的大师兄!

最近大师兄开发大屏页面碰到一个困境：动画还原。

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

小伙伴们是不是和大师兄有类似的经历呢?大家可以留言分享哦！

被设计师折磨一顿后，大师兄找到了解决这个困境的方案。它就是今天的主角：Lottie

Lottie简介

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

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

Lottie流程

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

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

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

Lottie使用入门

静态URL引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.8.1/lottie.min.js" integrity="sha512-V1YyTKZJrzJNhcKthpNAaohFXBnu5K9j7Qiz6gv1knFuf13TW/3vpgVVhJu9fvbdW8lb5J6czIhD4fWK2iHKXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

调用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使用

<template>
    <div id="app">
        <lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>
        <div>
            <p>Speed: x{{animationSpeed}}</p>
            <input type="range" value="1" min="0" max="3" step="0.5"
                   v-on:change="onSpeedChange" v-model="animationSpeed">
        </div>
        <button v-on:click="stop">stop</button>
        <button v-on:click="pause">pause</button>
        <button v-on:click="play">play</button>
    </div>
</template>

<script>
  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);
      }
    }
  }
</script>

参数配置

也就是上面的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的更多详解，请查阅下方链接。