100%硬核解决前端复杂动画的秘密武器!

  • 100%硬核解决前端复杂动画的秘密武器!已关闭评论
  • 29 次浏览
  • A+
所属分类:Web前端
摘要

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

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

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

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

100%硬核解决前端复杂动画的秘密武器!

Lottie简介

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

下面是Lottie提供的官方效果图。类似下面这种一段动画的播放,非常适合使用Lottie来做。
100%硬核解决前端复杂动画的秘密武器!

Lottie流程

我们先来看下整个流程简图。
100%硬核解决前端复杂动画的秘密武器!

设计师用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的更多详解,请查阅下方链接。

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

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

关注同名微信