Lottie-Web 动画库在 HTML5 页面和 Vue 项目中的使用指南

Lottie 是一个强大的动画库，能够轻松实现复杂的矢量动画效果。本文将详细介绍如何在 HTML5 页面和 Vue 项目中使用 Lottie-Web 动画库，并提供完整的代码示例与注意事项。

1. Lottie-Web 简介

Lottie 是 Airbnb 开源的动画库，支持将 After Effects 动画导出为 JSON 文件，并在 Web、移动端等平台渲染。Lottie-Web 是其 Web 端实现，支持 SVG、Canvas 和 HTML 渲染方式。

​2. 在 HTML5 页面中使用 Lottie-Web

​实现步骤

1. ​引入 Lottie-Web 库
   通过 <script> 标签引入 Lottie-Web 库：

   <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.1/lottie.min.js"></script>复制

2. ​创建动画容器
   在 HTML 中创建一个容器元素（如 <div> 或 <canvas>）：

   <div id="lottie-container" style="width: 300px; height: 300px;"></div>复制

3. ​初始化并播放动画
   使用 Lottie 加载动画并播放：

   const animation = lottie.loadAnimation({
     container: document.getElementById('lottie-container'), // 容器元素
     renderer: 'svg', // 渲染方式（svg/canvas/html）
     loop: true, // 是否循环播放
     autoplay: true, // 是否自动播放
     path: 'path/to/your/animation.json' // 动画 JSON 文件路径
   });复制

​3. 在 Vue 项目中使用 Lottie-Web

​实现步骤

1. ​安装 Lottie-Web 库
   通过 npm 或 yarn 安装 Lottie-Web：

   npm install lottie-web复制

2. ​创建动画容器
   在 Vue 模板中创建容器元素（如 <canvas>）：

   <template>
     <view style="text-align: center;">
       <canvas id="lottie_demo" type="2d" style="display: inline-block; width: 300px; height: 300px;" />
     </view>
     <button @click="init" style="width: 300px;">初始化</button>
     <button @click="play" style="width: 300px;">播放</button>
     <button @click="pause" style="width: 300px;">暂停</button>
   </template>复制

3. ​初始化并控制动画
   在 Vue 组件中初始化 Lottie 动画，并实现播放、暂停功能：

   <script>
   import lottie from 'lottie-web';
   let ani = null; // 动画实例
    
   export default {
     data() {
       return {
         inited: false // 初始化状态
       };
     },
     methods: {
       // 初始化动画
       init() {
         if (this.inited) return;
         ani = lottie.loadAnimation({
           container: document.getElementById('lottie_demo'), // 容器元素
           loop: true, // 是否循环播放
           autoplay: true, // 是否自动播放
           renderer: 'svg', // 渲染方式
           animationData: require('../../../static/lottie-anime-data/data.json') // 动画 JSON 数据
         });
         this.inited = true;
       },
       // 播放动画
       play() {
         ani.play();
       },
       // 暂停动画
       pause() {
         ani.pause();
       }
     }
   };
   </script>复制

​4. 注意事项

1. ​动画实例管理

   • 将动画实例（ani）定义为全局变量，避免 Vue 组件销毁时实例丢失。
   • 不要将动画实例挂载到 this 上，否则可能导致循环引用报错。

2. ​平台兼容性

   • 在 UniApp 中，需通过条件编译（#ifdef H5）确保代码仅在 H5 平台运行。

3. ​性能优化

   • 使用 canvas 渲染方式时，注意动画复杂度，避免性能问题。
   • 动画 JSON 文件尽量压缩，减少加载时间。