前言

最近我所負責(zé)的項目中，我采用了動畫效果，并開始使用 gif 來實現(xiàn)。然而，在實踐過程中，我發(fā)現(xiàn) gif 格式的動畫在 git 中出現(xiàn)了明顯的鋸齒感，這讓我非常困擾。為了追求更完美的表現(xiàn)效果，我最終選擇了 lottie 來實現(xiàn)我的動畫需求。我深知動畫效果的呈現(xiàn)對于用戶體驗至關(guān)重要，因此我非常認真地對待每一個細節(jié)，希望通過我的努力，為用戶帶來更加流暢、自然的視覺體驗。

Lottie 簡介

Lottie 是一個適用于 Android、iOS、Web 和 Windows 的庫，它使用 Bodymovin 解析導(dǎo)出為 JSON 的 Adobe After Effects 動畫，并在移動設(shè)備和 Web 上原生渲染它們！

這是第一次，設(shè)計師可以創(chuàng)建和發(fā)布精美的動畫，而無需工程師精心手工重新創(chuàng)建它們。他們說一圖勝千言，請看示例：

上述動畫是在 After Effects 中創(chuàng)建的，可以使用簡單的 JSON 文件在所有平臺上進行本機渲染。

lottie 的安裝

# 由于在 web 端，所以安裝的是 lottie-web
pnpm add lottie-web

lottie 的使用

簡單介紹 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() 以啟動動畫。它將一個對象作為唯一的參數(shù)，下面是對象中字段的解釋說明：

• animationData: 包含導(dǎo)出的動畫數(shù)據(jù)的 Object。
• path: 動畫對象的相對路徑。（animationData 和 path 互斥）
• loop: 動畫循環(huán)次數(shù)，可選值 true/false/number
• autoplay: 準備就緒后自動開始播放，可選值 true/false
• name: 動畫名稱，供將來參考
• renderer: 設(shè)置渲染器，可選值 svg/canvas/html
• container: 用于渲染動畫的 DOM 元素

它返回您可以通過播放、暫停、setSpeed 等方式控制的動畫實例。

動畫實例中的常用方法

• anim.play()：播放動畫
• anim.stop()：停止動畫
• anim.pause()：暫停動畫
• anim.setLocationHref(locationHref)： 一個參數(shù)通常作為 'location.href' 傳遞。當你在 safari 中遇到掩碼問題時，它很有用，因為你的 url 沒有 “#” 符號。
• anim.setSpeed(speed)：設(shè)置動畫速度(1為正常速度)
• anim.goToAndStop(value, isFrame)：跳到某個時刻并停止，第一個參數(shù)是數(shù)值，如果第二個參數(shù)為true，則第一個參數(shù)為幀，如果為false則為時間(默認為false)
• anim.goToAndPlay(value, isFrame) ?跳到某個時刻并播放，第一個參數(shù)是數(shù)值，如果第二個參數(shù)為true，則第一個參數(shù)為幀，如果為false則為時間(默認為false)
• anim.setDirection(direction)：設(shè)置方向 (1 為正常.)
• anim.playSegments(segments, forceFlag)：第一個參數(shù)是單個數(shù)組或多個數(shù)組，每個數(shù)組有兩個值(fromFrame,toFrame)，第二個參數(shù)是一個布爾值，用于立即強制執(zhí)行
• anim.setSubframe(flag)：如果為 false，它將尊重原始 AE fps。如果為 true，它將盡可能多地更新。 (默認值為true)
• anim.destroy()：銷毀動畫實例

Lottie 中常用的方法

• lottie.play()：通過 name 來指定運行的動畫
• lottie.stop()：通過 name 來指定停止的動畫
• lottie.setSpeed()：通過 name 來指定動畫的速度
• lottie.setDirection()：通過 name 來指定動畫的方向
• lottie.searchAnimations()：查找 class 為 “l(fā)ottie” 的元素
• lottie.loadAnimation()：加載動畫并返回要單獨控制的動畫實例
• lottie.destroy()：銷毀和釋放資源，DOM 元素將被清空。
• lottie.registerAnimation()：你可以直接用 registerAnimation 注冊一個元素。它必須有 “data-animation-path” 屬性指向 data.json 的 url
• lottie.setQuality()：默認 'high'，設(shè)置 'high','medium','low'，或一個數(shù)字 >1 .提高播放器表現(xiàn)。在一些動畫中，低至2不會顯示任何差異。

name 為 lottie.loadAnimation() 方法中設(shè)置的 name

Events

以下是可以直接使用 element.onXxxx 綁定的事件。

• onComplete
• onLoopComplete
• onEnterFrame
• onSegmentStart

你也可以使用 addEventListener 來處理以下事件:

• complete：動畫完成時觸發(fā)
• loopComplete：當 loop 為 true 時，每次加載完成時觸發(fā)
• enterFrame：每進入一幀就會觸發(fā)，播放時每一幀都會觸發(fā)一次
• segmentStart：每開始進入一幀就會觸發(fā)，播放時每一幀都會觸發(fā)一次
• config_ready：config 初始化時觸發(fā)
• data_ready：當動畫的所有部分都加載完成時
• DOMLoaded：當元素被添加到DOM中時
• destroy：當動畫被銷毀時觸發(fā)

封裝基礎(chǔ)組件

在 vue 中為了使用方便，可以封裝為一個通用組件來使用。

<template>
    <component :is="props.tag" ref="container">
        <slot></slot>
    </component>
</template>

<script>
import lottie from "lottie-web";
import { ref, onMounted, onUnmounted, shallowRef } from 'vue'

// 默認配置
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 部分的圖片路徑
// 把 動畫需要的圖片資源，放到 public 目錄下的 lotties目錄下
// 每個動畫資源都在 lotties 下新建一個目錄去存放
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 中的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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