当前位置：首页 > news >正文

Lottie动画

news 2025/8/15 16:27:37

安装

使用

基本使用

其他配置

事件

常用方法

自制JSON

做开发，总会遇到一些很难实现的动画，前端做不了怎么办。那就让AE办。前端只需要使用包，就可以加载动画，好过自己去写，减少开发时间成本。

Lottie这个包，就是懒人神器，并且可以用在网页和安卓项目中，直接爽死好吧。这边直接说使用步骤。

安装

yarn add lottie-web

使用

基本使用

安装好后，就可以直接使用这个包，以vue3为例：

<template><div id="animation" style="width: 800px;height: 800px;"></div>
</template><script setup>
import Lottie from 'lottie-web'
import { onMounted } from 'vue'onMounted(() => {Lottie.loadAnimation({container: document.getElementById('animation'),// 放置在哪个元素上播放renderer: 'svg',//  'svg' / 'canvas' / 'html' 来设置渲染器loop: true,// 循环：true / false / numberautoplay: true,//  true / false 准备好后立即开始播放path: '/public/Untitled.json',// 动画对象的相对路径})
})
</script><style></style>

其他配置

lottie.loadAnimation({container: element, // the dom elementrenderer: 'svg',loop: true,autoplay: true,animationData: animationData, // the animation data// ...or if your animation contains repeaters:// animationData: cloneDeep(animationData), // e.g. lodash.clonedeeprendererSettings: {context: canvasContext, // the canvas context, only support "2d" contextpreserveAspectRatio: 'xMinYMin slice', // Supports the same options as the svg element's preserveAspectRatio propertytitle: 'Accessible Title', // Adds SVG title element for accessible animation titledescription: 'Accessible description.', // Adds SVG desc element for accessible long description of animationclearCanvas: false,progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.hideOnTransparent: true, //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)className: 'some-css-class-name',id: 'some-id',}
});

事件

onComplete
onLoopComplete
onEnterFrame
onSegmentStart

还可以将 addEventListener 与以下事件一起使用：

complete
loopComplete
drawnFrame
enterFrame
segmentStart
config_ready (when initial config is done)
data_ready (when all parts of the animation have been loaded)
data_failed (when part of the animation can not be loaded)
loaded_images (when all image loads have either succeeded or errored)
DOMLoaded (when elements have been added to the DOM)
destroy

常用方法

1. lottie.play（） -- 具有 1 个可选参数名称，用于定位特定动画
2. lottie.stop（） -- 具有 1 个可选参数名称，用于定位特定动画
3. lottie.goToAndStop（value， isFrame， name） -- 将具有指定名称的动画播放移动到定义的时间。如果省略 name，则移动所有动画实例。
4. lottie.setSpeed（） -- 第一个参数速度（1 是正常速度） -- 有 1 个可选参数名称，用于定位特定动画
5. lottie.setDirection（） -- 第一个参数名称 direction （1 是法向） -- 有 1 个可选参数名称，用于定位特定动画
6. lottie.searchAnimations（） -- 查找类为 “lottie” 或 “bodymovin”
的元素 lottie.loadAnimation（） -- 如上所述。返回要单独控制的 Animation 实例。
7. lottie.destroy（name） -- 销毁具有指定名称的动画。如果省略 name，则销毁所有动画实例。DOM 元素将被清空。
8. lottie.registerAnimation（） —— 您可以直接使用 registerAnimation 注册一个元素。它必须具有指向data.json url的 “data-animation-path” 属性 lottie.getRegisteredAnimations（） -- 返回所有动画实例
9. lottie.setQuality（） -- 默认为 'high'，设置 'high'、'medium'、'low' 或> 1 的数字以提高播放器性能。在某些动画中，低至 2 不会显示任何差异。
10. lottie.setLocationHref（） -- 设置引用具有 id 的 svg 元素的相对位置。当您在 Safari 中遇到遮罩问题时，它非常有用。
11. lottie.freeze（） -- 冻结所有正在播放的动画或将要加载
的动画 lottie.unfreeze（） -- 解冻所有动画
12. lottie.inBrowser（） -- 如果库在浏览器中运行，则为 true） lottie.resize（） -- 调整所有动画实例的大小