vue 使用lottie-web创建动画

lottie是一个跨平台的动画库,通过AE(After Effects)制作动画,再通过AE插件Bodymovin导出Json文件,最终各个终端解析这个Json文件,还原动画。本文中我只介绍前端用到的库lottie-web。

对比三种常规的制作动画方式

1.Png序列帧
2.Gif图
3.前端Svg API

先对位图与矢量图有一个基本的概念。

矢量图就是使用直线和曲线来描述的图形,构成这些图形的元素是一些点、线、矩形、多边形、圆和弧线等,它们都是通过数学公式计算获得的,具有编辑后不失真的特点。
位图是由称作像素(图片元素)的单个点组成的,放大会失真。

Png序列帧

用Png序列帧是也容易理解,用css keyframes操作每一帧需要展示的图片,缺点也很明显,每一帧都是一张图片,占比较大的体积。当然也可以将图片合并成精灵图(Sprites Map),可参考这个方案,使用 gka 一键生成帧动画。Png也是位图,放大会失真,不过可以通过增大图片尺寸,避免模糊。

Gif图

如果之前没有用过动画,用Gif图是最简单的,只需要引入一张图。但是Gif图是位图,不是矢量图,放大会虚。

前端Svg API

Svg API对于动画初学者不太友好,你要实现一个自定义的动画,需要了解Svg的所有的API,虽然它的属性与css的动画有一些相似。它是矢量图,不失真。

安装lottie-web

npm install lottie-web

然后就是在项目中引用

<template>
  <div class="box">
    <h1>{{ msg }}h1>
    <button @click="startFun">播放button>
    <button @click="suspendFun">暂停button>
    <div id="lottie_box">div>
  div>
template>

<script>
import lottieWeb from 'lottie-web';
import * as animationData from '../assets/拆红包.json'; // 导出的动效json文件
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      lottie:{}
    }
  },
  methods:{
    suspendFun:function(){
    	//动画暂停
      this.lottie.pause();
    },
    startFun:function(){
    	//动画播放
      this.lottie.play()
    }
  },

  mounted() {
  	// 这里一定要写,这个是图片资源的路径
    animationData.assets.forEach(item => {
      item.u = "";
      if (item.w && item.h) {
        item.p = require(`@/assets/images/${item.p}`);
      }
    });

    let data = {
      container: document.getElementById('lottie_box'),
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: animationData.default  // 这里一定要加.default
    }
    this.lottie = lottieWeb.loadAnimation(data)

    this.lottie["addEventListener"]("complete", () => {
      /** 销毁lottie动画对象; */
      this.lottie["destroy"]();
    });

  }
}
script>


<style scoped>
  .box{
    width: 100%;
    height: 100%;
  }
  #lottie_box{
    width: 400px;
    height:800px;
    margin: 0px auto;
  }
style>

container:当前需要渲染的DOM
renderer:渲染方式,默认是Svg,还有Html和Canvas方案。
loop:是否循环播放
autoplay:是否自动播放
animationData:AE导出的Json,注意,这里不是路径
assetsPath:Json文件里资源的绝对路径,webpack项目需要配合这个参数。
动画的播放与暂停,如果动画需要用户触发与暂停,需要有一个切换操作(toggle)

this.animation.play();
this.animation.pause();

动画执行过程中的钩子,可以对动画有一定的控制权

complete
loopComplete
enterFrame
segmentStart
config_ready(初始配置完成)
data_ready(所有动画数据加载完成)
DOMLoaded(元素已添加到DOM节点)
destroy
// 动画播放完成触发
anm.addEventListener('complete', anmLoaded);

// 当前循环播放完成触发 
anm.addEventListener('loopComplete', anmComplete);

// 播放一帧动画的时候触发 
anm.addEventListener('enterFrame', enterFrame);

打包时图片资源路径

webpack工程需要注意Json文件如果有图片资源(Png或者Svg),需要将文件放在项目的根目录的static下。这样打包的时候,图片会被打包,并且后缀名不会被改变,当然需要配合assetsPath这个参数,设置图片的绝对路径。而CDN的路径可以通过process.env.CDN_URL从webpack传到前端代码中。

你可能感兴趣的:(Vue,动画,前端,vue.js)