前言

最近我所負(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)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。