lottie 动画在 vue 中的使用
前言
最近我所負(fù)責(zé)的項(xiàng)目中,我采用了動(dòng)畫效果,并開(kāi)始使用 gif 來(lái)實(shí)現(xiàn)。然而,在實(shí)踐過(guò)程中,我發(fā)現(xiàn) gif 格式的動(dòng)畫在 git 中出現(xiàn)了明顯的鋸齒感,這讓我非常困擾。為了追求更完美的表現(xiàn)效果,我最終選擇了 lottie 來(lái)實(shí)現(xiàn)我的動(dòng)畫需求。我深知?jiǎng)赢嬓Ч某尸F(xiàn)對(duì)于用戶體驗(yàn)至關(guān)重要,因此我非常認(rèn)真地對(duì)待每一個(gè)細(xì)節(jié),希望通過(guò)我的努力,為用戶帶來(lái)更加流暢、自然的視覺(jué)體驗(yàn)。
Lottie 簡(jiǎn)介
Lottie 是一個(gè)適用于 Android、iOS、Web 和 Windows 的庫(kù),它使用 Bodymovin 解析導(dǎo)出為 JSON 的 Adobe After Effects 動(dòng)畫,并在移動(dòng)設(shè)備和 Web 上原生渲染它們!
這是第一次,設(shè)計(jì)師可以創(chuàng)建和發(fā)布精美的動(dòng)畫,而無(wú)需工程師精心手工重新創(chuàng)建它們。他們說(shuō)一圖勝千言,請(qǐng)看示例:
上述動(dòng)畫是在 After Effects 中創(chuàng)建的,可以使用簡(jiǎn)單的 JSON 文件在所有平臺(tái)上進(jìn)行本機(jī)渲染。
lottie 的安裝
# 由于在 web 端,所以安裝的是 lottie-web
pnpm add lottie-web
lottie 的使用
簡(jiǎn)單介紹 lottie 的使用
import lottie from 'lottie-web'
import animationData from 'xx/xx/xx.json'
lottie.loadAnimation({
animationData,
loop: true,
autoplay: true,
renderer: 'svg',
container: document.querySelector('container')
})
調(diào)用 lottie.loadAnimation() 以啟動(dòng)動(dòng)畫。它將一個(gè)對(duì)象作為唯一的參數(shù),下面是對(duì)象中字段的解釋說(shuō)明:
- animationData: 包含導(dǎo)出的動(dòng)畫數(shù)據(jù)的 Object。
- path: 動(dòng)畫對(duì)象的相對(duì)路徑。(animationData 和 path 互斥)
- loop: 動(dòng)畫循環(huán)次數(shù),可選值
true/false/number - autoplay: 準(zhǔn)備就緒后自動(dòng)開(kāi)始播放,可選值
true/false - name: 動(dòng)畫名稱,供將來(lái)參考
- renderer: 設(shè)置渲染器,可選值
svg/canvas/html - container: 用于渲染動(dòng)畫的 DOM 元素
它返回您可以通過(guò)播放、暫停、setSpeed 等方式控制的動(dòng)畫實(shí)例。
動(dòng)畫實(shí)例中的常用方法
- anim.play():播放動(dòng)畫
- anim.stop():停止動(dòng)畫
- anim.pause():暫停動(dòng)畫
- anim.setLocationHref(locationHref): 一個(gè)參數(shù)通常作為 'location.href' 傳遞。當(dāng)你在 safari 中遇到掩碼問(wèn)題時(shí),它很有用,因?yàn)槟愕?url 沒(méi)有 “#” 符號(hào)。
- anim.setSpeed(speed):設(shè)置動(dòng)畫速度(1為正常速度)
- anim.goToAndStop(value, isFrame):跳到某個(gè)時(shí)刻并停止,第一個(gè)參數(shù)是數(shù)值,如果第二個(gè)參數(shù)為true,則第一個(gè)參數(shù)為幀,如果為false則為時(shí)間(默認(rèn)為false)
- anim.goToAndPlay(value, isFrame) ?跳到某個(gè)時(shí)刻并播放,第一個(gè)參數(shù)是數(shù)值,如果第二個(gè)參數(shù)為true,則第一個(gè)參數(shù)為幀,如果為false則為時(shí)間(默認(rèn)為false)
- anim.setDirection(direction):設(shè)置方向 (1 為正常.)
- anim.playSegments(segments, forceFlag):第一個(gè)參數(shù)是單個(gè)數(shù)組或多個(gè)數(shù)組,每個(gè)數(shù)組有兩個(gè)值(fromFrame,toFrame),第二個(gè)參數(shù)是一個(gè)布爾值,用于立即強(qiáng)制執(zhí)行
- anim.setSubframe(flag):如果為 false,它將尊重原始 AE fps。如果為 true,它將盡可能多地更新。 (默認(rèn)值為true)
- anim.destroy():銷毀動(dòng)畫實(shí)例
Lottie 中常用的方法
-
lottie.play():通過(guò)
name來(lái)指定運(yùn)行的動(dòng)畫 -
lottie.stop():通過(guò)
name來(lái)指定停止的動(dòng)畫 -
lottie.setSpeed():通過(guò)
name來(lái)指定動(dòng)畫的速度 -
lottie.setDirection():通過(guò)
name來(lái)指定動(dòng)畫的方向 - lottie.searchAnimations():查找 class 為 “l(fā)ottie” 的元素
- lottie.loadAnimation():加載動(dòng)畫并返回要單獨(dú)控制的動(dòng)畫實(shí)例
- lottie.destroy():銷毀和釋放資源,DOM 元素將被清空。
- lottie.registerAnimation():你可以直接用 registerAnimation 注冊(cè)一個(gè)元素。它必須有 “data-animation-path” 屬性指向 data.json 的 url
- lottie.setQuality():默認(rèn) 'high',設(shè)置 'high','medium','low',或一個(gè)數(shù)字 >1 .提高播放器表現(xiàn)。在一些動(dòng)畫中,低至2不會(huì)顯示任何差異。
name 為 lottie.loadAnimation() 方法中設(shè)置的 name
Events
以下是可以直接使用 element.onXxxx 綁定的事件。
- onComplete
- onLoopComplete
- onEnterFrame
- onSegmentStart
你也可以使用 addEventListener 來(lái)處理以下事件:
- complete:動(dòng)畫完成時(shí)觸發(fā)
- loopComplete:當(dāng) loop 為 true 時(shí),每次加載完成時(shí)觸發(fā)
- enterFrame:每進(jìn)入一幀就會(huì)觸發(fā),播放時(shí)每一幀都會(huì)觸發(fā)一次
- segmentStart:每開(kāi)始進(jìn)入一幀就會(huì)觸發(fā),播放時(shí)每一幀都會(huì)觸發(fā)一次
- config_ready:config 初始化時(shí)觸發(fā)
- data_ready:當(dāng)動(dòng)畫的所有部分都加載完成時(shí)
- DOMLoaded:當(dāng)元素被添加到DOM中時(shí)
- destroy:當(dāng)動(dòng)畫被銷毀時(shí)觸發(fā)
封裝基礎(chǔ)組件
在 vue 中為了使用方便,可以封裝為一個(gè)通用組件來(lái)使用。
<template>
<component :is="props.tag" ref="container">
<slot></slot>
</component>
</template>
<script>
import lottie from "lottie-web";
import { ref, onMounted, onUnmounted, shallowRef } from 'vue'
// 默認(rèn)配置
const defaultConfig = {
renderer: "svg",
loop: true,
autoplay: true,
};
const props = defineProps({
tag: {
type: String,
default: "div",
},
options: {
type: Object,
default: () => ({}),
},
})
const container = ref(null)
const instance = shallowRef(null)
// 處理配置 animationData 字段中 assets 部分的圖片路徑
// 把 動(dòng)畫需要的圖片資源,放到 public 目錄下的 lotties目錄下
// 每個(gè)動(dòng)畫資源都在 lotties 下新建一個(gè)目錄去存放
const parseAssets = (assets) => {
const assetsBaseURL = process.env.VUE_APP_ROUTE_BASE_URL + '/lotties'
return assets.map(item => {
return {
...item,
u: assetsBaseURL + item.u,
};
});
}
const init = () => {
// 配置
const conf = {
...defaultConfig,
...props.options,
};
const assets = 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.value && instance.value.destroy) {
instance.value.destroy();
}
})
</script>
參考
Web (airbnb.io)
總結(jié)
以上是生活随笔為你收集整理的lottie 动画在 vue 中的使用的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 机房的三度是什么
- 下一篇: 【源码系列#04】Vue3侦听器原理(W