Web动画（lottie篇）

一、Lottie简介

Lottie是一个库，可以解析使用AE制作的动画（需要用bodymovin导出为json格式），支持web、ios、android和react native。在web侧，lottie-web库可以解析导出的动画json文件，并将其以svg或者canvas的方式将动画绘制到我们页面中

总的来说，

• Lottie通过读取json文件信息实现动画效果。
• json信息包括动画长度、宽度、动画资源、图层信息等，这些属性阐述了动画该做什么、该怎么做。

1.1 lottie的优点

Lottie方法方案是由设计师出动画，导出为json，给前端播放。所以，使用Lottie方案的好处在于：

• 动画由设计使用专业的动画制作工具Adobe After Effects来实现，使动画实现更加方便，动画效果也更好；
• 前端可以方便的调用动画，并对动画进行控制，减少前端动画工作量；
• 设计制作动画，前端展现动画，专业人做专业事，分工合理；
• 卖家秀即买家秀，还原程度百分之百；
• 使用lottie方案，json文件大小会比gif文件小很多，性能也会更好。
• 支持跨平台，开发成本较低，一套Lottie动画可以在Android/IOS/Web多端使用。
• 性能好，端上除了解析json，基本没有其他耗性能的操作；并且相比于需要存储较多图片的帧动画，Lottie可以节省比较多的内存空间。

二、使用方法（附基本代码）

2.1 前期准备

1. 下载安装** After Effects **

1. 在AE上制作动画
2. 安装插件Bodymovin，并使用插件导出，导出的是json格式的文件结构

1. 使用【lottie-web】依赖读取该文件导出的json 格式的内容 便引入了该lottie动画

2.2 基本代码

<template>
  <div class="lottie_page">
    <div id="lottie"></div>
  </div>
</template>
<script>
import lottie from 'lottie-web';  // 引入lottie 库
import * as animationData from '@/assets/lottie/data.json'; // 引入素材文件
export default {
  data() {
    return {
    };
  },
  mounted() {
    this.lot = lottie.loadAnimation({
      container: document.getElementById('lottie'),
      renderer: 'svg',
      loop: false,
      autoplay: false,
      animationData: animationData.default
    });
  },
};
</script>

所以，在网页上制作动画就是这么简单，只需少量的代码便可以实现！！

三、效果

四、参考

1. 原生插件 用AE导出json | LottieFiles plugin | 原生插件
2. bodymovie插件 https://pan.baidu.com/s/1vcM86DyoZjefwCN5_-GqIA?pwd=2301&at=1711347005762
3. 使用 如何在vue中使用Lottie - 掘金

附加：进阶玩法

第一阶段

整体元素的简单的播放，暂停，设置播放进度等

第二阶段

多个元素各自有自己的播放的规律

1. AE中有一个总合成，不同元素之间有一个单独的合成
2. 导出多个不同元素的json文件
3. 在vue中为每个json文件定义一个标签，并挂载事件
4. 单独控制元素的播放规律

第三阶段

多个元素有个自己动态的播放规律

由于 lottie是用过 json 来控制动画的，而前端与后端交互最常见的格式是什么？

JSON！！

因此，可以从后端获取数据之后，在前端重新拼接到json中，就可以实现动态的动画。

举个栗子🌰：

1. 拼多多翻牌抽奖（动态设置金额，指定选中翻牌）