Vue 3中使用 Lottie 动画

xiangzhihong
903 阅读4分钟

一、Lottie动画简介

Lottie是由Airbnb开源的面向Android、iOS、Web和Windows的动画库，开发者可以使用它在Web、iOS、Android等平台上实现高性能的体验丰富的矢量动画。

在早期的前端开发中，Flash是网页动画之王，不过它的规范约束随意，造成很多时设计出来的产品都无法符合用户体验要求。随着Flash动画的消失，HTML网页开发的主流技术，成为前端开发的技术标准，不过在HTML网页上进行动画开发其成本也是相当高的。事实上，除了开发成本和技术难点外，开发的动画还可能会出现与设计稿相差甚远，而Lottie动画的出现就很好的解决了这一问题。

早在2015年，Hernan Torrisi就提出了在AE中导出动画的想法，并且使用他创建的Bodymovin插件，能够很容易地导出JSON描述的动画，同时还发布了史上第一个支持JSON格式动画的渲染器。

2017年，Airbnb的工程师看到了基于JSON格式动画的潜力，于是编写了可以渲染JSON文件的iOS和Android库，并且扩展到Web和Windows，他们将这个库称为Lottie。同时，为了方便其他开发者，Airbnb还打造一个技术社区，开发者可以在Airbnb平台上传、下载和交易动画。

在使用流程上，开发Lottie动画需要先使用Adobe After Effects做出原动画，然后再使用Bodymovin插件把动画导出成JSON文件，而这个JSON文件就是Lottie需要解析的动画源文件。所以，制作Lottie动画需要先下载Adobe After Effects软件，如下图所示。

image.png

需要说明的是，使用Adobe After Effects制作Lottie动画是一个专业的事情，最好由专业的设计师完成。如果只是想体验Lottie动画的魅力，那么可以从LottieFiles社区下载免费的Lottie动画文件，下载时需要选择JSON格式，如下图所示。

image.png

二、基本使用

在前端开发中开发Lottie动画，需要先在项目中安装Lottie插件，可以使用npm或yarn命令进行安装。

npm install lottie-web
# 或
yarn add lottie-web

然后，将导出的Lottie动画的JSON文件放到项目的public目录下。在页面中引入Lottie组件，使用Lottie组件的loadAnimation方法加载Lottie动画，在加载动画文件的过程中需要传入一些必要的参数，如渲染模式、Lottie动画文件路径等，如下所示。

<template>
  <div class="lottie">
    <div id="lottie_box" class="lottie-image"></div>
  </div>
  <button @click="startFun">播放</button>
  <button @click="suspendFun">暂停</button>
</template>
 
<script>
import lottie from 'lottie-web';
 
export default {
  components: 'Lottie',
  methods: {
    suspendFun() {
      this.lottie.pause();
    },
    startFun() {
      this.lottie.play()
    }
  },
  mounted() {
    this.lottie = lottie.loadAnimation({
      container: document.getElementById('lottie_box'),
      renderer: 'svg',
      loop: true,
      path: './anim.json'
    })
  }
}
</script>
 
<style>
.lottie {
  display: flex;
  justify-content: center;
}
.lottie-image {
  width: 400px;
  height: 400px;
}
</style>

三、配置参数

Lottie 提供了一系列配置参数，以便你能够定制化和控制动画的行为。以下是 Lottie 的主要配置参数以及它们的使用方法。

container

container 参数用于指定动画将被插入到页面中的容器元素。可以是 DOM 元素，也可以是一个用于选择元素的 CSS 选择器字符串。

const container = document.getElementById('animation-container');

// 或者使用 CSS 选择器字符串
const container = '#animation-container';

// 初始化 Lottie 动画
const animation = lottie.loadAnimation({
  container: container,
  /* 其他配置参数... */
});

renderer

renderer 参数用于指定渲染器的类型，常用的有 "svg" 和 "canvas"。

const animation = lottie.loadAnimation({
  container: '#animation-container',
  renderer: 'svg', // 或 'canvas'
  /* 其他配置参数... */
});

loop

loop 参数用于指定动画是否循环播放。设置为 true 时，动画将一直循环播放。

const animation = lottie.loadAnimation({
  container: '#animation-container',
  loop: true,
  /* 其他配置参数... */
});

autoplay

autoplay 参数用于指定是否在加载完成后自动播放动画。设置为 true 时，动画将在加载完成后立即开始播放。

const animation = lottie.loadAnimation({
  container: '#animation-container',
  autoplay: true,
  /* 其他配置参数... */
});

path

path 参数用于指定动画 JSON 文件的路径或 URL。可以是相对路径或绝对路径。

const animation = lottie.loadAnimation({
  container: '#animation-container',
  path: 'path/to/animation.json',
  /* 其他配置参数... */
});

rendererSettings

rendererSettings 参数用于包含特定渲染器的设置选项。

const animation = lottie.loadAnimation({
  container: '#animation-container',
  rendererSettings: {
    clearCanvas: true, // 在每一帧上清除画布
  },
  /* 其他配置参数... */
});

animationData

animationData 参数允许你直接将动画数据作为 JavaScript 对象传递给 Lottie。可以用于直接内嵌动画数据而不是从文件加载。

const animationData = {
  /* 动画数据的具体内容 */
};

const animation = lottie.loadAnimation({
  container: '#animation-container',
  animationData: animationData,
  /* 其他配置参数... */
});

name

name 参数用于为动画指定一个名称。

const animation = lottie.loadAnimation({
  container: '#animation-container',
  name: 'myAnimation',
  /* 其他配置参数... */
});

speed

speed 参数用于控制动画的播放速度。1 表示正常速度，0.5 表示一半速度，2 表示两倍速度。

const animation = lottie.loadAnimation({
  container: '#animation-container',
  speed: 1.5, // 播放速度为原来的1.5倍
  /* 其他配置参数... */
});

事件回调

Lottie 还支持通过事件回调来执行一些自定义操作，如 onComplete、onLoopComplete、onEnterFrame 等。

const animation = lottie.loadAnimation({
  container: '#animation-container',
  loop: true,
  onComplete: () => {
    console.log('动画完成！');
  },
  /* 其他配置参数... */
});
avatar
文章
阅读
粉丝