lottie 动画在 vue 中的使用.docx

第

lottie动画在vue中的使用

loopComplete：当loop为true时，每次加载完成时触发

enterFrame：每进入一帧就会触发，播放时每一帧都会触发一次

segmentStart：每开始进入一帧就会触发，播放时每一帧都会触发一次

config_ready：config初始化时触发

data_ready：当动画的所有部分都加载完成时

DOMLoaded：当元素被添加到DOM中时

destroy：当动画被销毁时触发

封装基础组件

在vue中为了使用方便，可以封装为一个通用组件来使用。

template

component:is=props.tagref=container

slot/slot

/component

/template

script

importlottiefromlottie-web

import{ref,onMounted,onUnmounted,shallowRef}fromvue

//默认配置

constdefaultConfig={

renderer:svg,

loop:true,

autoplay:true,

constprops=defineProps({

tag:{

type:String,

default:div,

options:{

type:Object,

default:()=({}),

constcontainer=ref(null)

constinstance=shallowRef(null)

//处理配置animationData字段中assets部分的图片路径

//把动画需要的图片资源，放到public目录下的lotties目录下

//每个动画资源都在lotties下新建一个目录去存放

constparseAssets=(assets)={

constassetsBaseURL=process.env.VUE_APP_ROUTE_BASE_URL+/lotties

returnassets.map(item={

return{

...item,

u:assetsBaseURL+item.u,

constinit=()={

//配置

constconf={

...defaultConfig,

...props.options,

constassets=parseAssets(conf.animationData.assets||[]);

if(conf.animationData){

conf.animationData={...conf.animationData,assets};

instance.value=lottie.loadAnimation({

container:container.value,

...conf,

onMounted(()={

init();

onUnmounted(()={

if(instance.valueinstance.value.destroy){

instance.value.destroy();

/script

Web(airbnb.io)