lottie 動畫在 vue 中的使用

guojikun發表於2023-12-26
動畫Vue

前言

最近我所負責的專案中，我採用了動畫效果，並開始使用 gif 來實現。然而，在實踐過程中，我發現 gif 格式的動畫在 git 中出現了明顯的鋸齒感，這讓我非常困擾。為了追求更完美的表現效果，我最終選擇了 lottie 來實現我的動畫需求。我深知動畫效果的呈現對於使用者體驗至關重要，因此我非常認真地對待每一個細節，希望透過我的努力，為使用者帶來更加流暢、自然的視覺體驗。

Lottie 簡介

Lottie 是一個適用於 Android、iOS、Web 和 Windows 的庫，它使用 Bodymovin 解析匯出為 JSON 的 Adobe After Effects 動畫，並在移動裝置和 Web 上原生渲染它們！

這是第一次，設計師可以建立和釋出精美的動畫，而無需工程師精心手工重新建立它們。他們說一圖勝千言，請看示例：

上述動畫是在 After Effects 中建立的，可以使用簡單的 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')
})

呼叫 lottie.loadAnimation() 以啟動動畫。它將一個物件作為唯一的引數，下面是物件中欄位的解釋說明：

  • animationData: 包含匯出的動畫資料的 Object。
  • path: 動畫物件的相對路徑。（animationData 和 path 互斥）
  • loop: 動畫迴圈次數，可選值 true/false/number
  • autoplay: 準備就緒後自動開始播放，可選值 true/false
  • name: 動畫名稱，供將來參考
  • renderer: 設定渲染器，可選值 svg/canvas/html
  • container: 用於渲染動畫的 DOM 元素

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

動畫例項中的常用方法

  • anim.play()：播放動畫
  • anim.stop()：停止動畫
  • anim.pause()：暫停動畫
  • anim.setLocationHref(locationHref)： 一個引數通常作為 'location.href' 傳遞。當你在 safari 中遇到掩碼問題時，它很有用，因為你的 url 沒有 “#” 符號。
  • anim.setSpeed(speed)：設定動畫速度(1為正常速度)
  • anim.goToAndStop(value, isFrame)：跳到某個時刻並停止，第一個引數是數值，如果第二個引數為true，則第一個引數為幀，如果為false則為時間(預設為false)
  • anim.goToAndPlay(value, isFrame)  跳到某個時刻並播放，第一個引數是數值，如果第二個引數為true，則第一個引數為幀，如果為false則為時間(預設為false)
  • anim.setDirection(direction)：設定方向 (1 為正常.)
  • anim.playSegments(segments, forceFlag)：第一個引數是單個陣列或多個陣列，每個陣列有兩個值(fromFrame,toFrame)，第二個引數是一個布林值，用於立即強制執行
  • 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 為 “lottie” 的元素
  • lottie.loadAnimation()：載入動畫並返回要單獨控制的動畫例項
  • lottie.destroy()：銷燬和釋放資源，DOM 元素將被清空。
  • lottie.registerAnimation()：你可以直接用 registerAnimation 註冊一個元素。它必須有 “data-animation-path” 屬性指向 data.json 的 url
  • lottie.setQuality()：預設 'high'，設定 'high','medium','low'，或一個數字 >1 .提高播放器表現。在一些動畫中，低至2不會顯示任何差異。

name 為 lottie.loadAnimation() 方法中設定的 name

Events

以下是可以直接使用 element.onXxxx 繫結的事件。

  • onComplete
  • onLoopComplete
  • onEnterFrame
  • onSegmentStart

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

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

封裝基礎元件

在 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)

相關文章