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 库

   通过  标签引入 Lottie-Web 库：

2. ​创建动画容器

   在 HTML 中创建一个容器元素（如  或 ）：

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 模板中创建容器元素（如 ）：

     
       
     
     初始化
     播放
     暂停
   

3. ​初始化并控制动画

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

   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();
       }
     }
   };
   

​4. 注意事项

1. ​动画实例管理

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

   • ​平台兼容性

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

     • ​性能优化

       
       （图片来源网络，侵删）
       • 使用 canvas 渲染方式时，注意动画复杂度，避免性能问题。
       • 动画 JSON 文件尽量压缩，减少加载时间。