隨著網(wǎng)頁效果越來越絢麗，頁面的動(dòng)效也越來越復(fù)雜，各種動(dòng)畫方案層出不窮。

目前常規(guī)的幾種動(dòng)畫方案比如「Gif動(dòng)圖、CSS3動(dòng)畫、SVG動(dòng)畫、Canvas動(dòng)畫各有利弊」。

比如說Gif動(dòng)圖，包含大量顏色或長時(shí)間動(dòng)畫的Gif圖片是相當(dāng)「大」的，在系統(tǒng)中加載速度非常慢。并且GIF只支持256色，可能導(dǎo)致圖像「失真」或者不清晰。

Lottie動(dòng)畫

Lottie 是一種基于 「JSON」 的輕量級動(dòng)畫格式，它由 Airbnb 開發(fā)并開源，專門用于在網(wǎng)頁和移動(dòng)應(yīng)用中高效地渲染高質(zhì)量的矢量動(dòng)畫。

簡單總結(jié)一下Lottie動(dòng)畫的優(yōu)點(diǎn)大概是：

1. 輕量級：Lottie 動(dòng)畫是基于 JSON 文件描述的矢量動(dòng)畫，體積通常遠(yuǎn)小于Gif。并且由于是矢量格式，Lottie 動(dòng)畫可以無損縮放，適合響應(yīng)式設(shè)計(jì)。
2. 高性能：Lottie 使用 SVG 或 Canvas 渲染，瀏覽器負(fù)擔(dān)小，動(dòng)畫流暢，尤其適合移動(dòng)端。并且不會(huì)占用大量內(nèi)存或 CPU 資源。
3. 開發(fā)效率高：動(dòng)畫可以直接由AE導(dǎo)出(Bodymovin 插件)，開發(fā)者無需過多調(diào)整。
4. 交互好：可以通過 JavaScript 控制動(dòng)畫播放、暫停、進(jìn)度控制等，甚至支持與用戶行為聯(lián)動(dòng)（如滾動(dòng)觸發(fā)、點(diǎn)擊播放）。支持動(dòng)態(tài)更改顏色、文本等屬性（需插件或定制）。
5. 兼容性好：Lottie 提供了 Web、iOS、Android、React Native、Flutter 等多個(gè)平臺的官方 SDK 和社區(qū)支持。并且在各個(gè)平臺上的表現(xiàn)非常一致！

對比

實(shí)戰(zhàn)

簡單寫一個(gè)Lottie動(dòng)畫在Vue中的實(shí)現(xiàn)(需要使用 lottie-web 或者 vue-lottie)，具體代碼如下：

npm install vue-lottie --save

<template>
    <div class="wrap">
        <lottie v-if="isStart" :options="defaultOptions" :height="400" :width="400" />
    </div>
</template>

<script>
import Lottie from 'vue-lottie';
export default {
    components: {
        Lottie
    },
    data() {
        return {
            isStart: false,
            animationData: null,
        };
    },
    computed: {
        defaultOptions() {
            return {
                animationData: this.animationData,
                loop: true,
                autoplay: true
            };
        }
    },
    mounted() {
        fetch('/all.json')
            .then(response => response.json())
            .then(data => {
                this.animationData = data;
                this.isStart = true;
            });
    }
};
</script>

優(yōu)化

在項(xiàng)目中使用 「Lottie 動(dòng)畫」 時(shí)，雖然 Lottie 本身具有體積小、渲染高效等優(yōu)點(diǎn)，但如果動(dòng)畫文件較多或較大，仍可能對頁面加載速度和性能產(chǎn)生影響。

?

「省流」:“按需加載 + 壓縮 + 緩存” 是最核心的 Lottie 優(yōu)化組合。

?

優(yōu)化基本上有以下幾種方案：

「按需加載」

實(shí)現(xiàn)方式：

• 使用 IntersectionObserver 監(jiān)聽元素是否進(jìn)入視口。
• 或者結(jié)合 Vue 的 v-if 控制組件的渲染時(shí)機(jī)。

mounted() {
  const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      this.loadAnimation(); // 加載 JSON 文件并觸發(fā)動(dòng)畫
      observer.disconnect();
    }
  }, { threshold: 0.1 });

  observer.observe(this.$el);
}

「預(yù)加載關(guān)鍵動(dòng)畫」

對于首頁或用戶首次訪問必須展示的關(guān)鍵動(dòng)畫，提前進(jìn)行異步加載，但延遲播放。

實(shí)現(xiàn)方式：

• 在 App 初始化階段就通過 fetch() 或 import() 加載這些動(dòng)畫數(shù)據(jù)。
• 存儲在 Vuex 或全局狀態(tài)中，避免重復(fù)請求。

async mounted() {
  const response = await fetch('/animations/home-hero.json');
  this.$store.commit('setHeroAnimation', await response.json());
}

「壓縮JSON文件」

Lottie JSON 文件通常包含大量冗余信息（如注釋、未使用的圖層屬性），可以通過工具壓縮減小體積。

可以考慮使用LottieFiles Optimizer、lottie-minify進(jìn)行壓縮。

實(shí)現(xiàn)方式：

npx lottie-minify animation.json > optimized.json

「CDN托管」

將 JSON 文件上傳到 CDN，利用其CDN加速資源分發(fā)。

「降低動(dòng)畫播放質(zhì)量」

在低端設(shè)備或慢速網(wǎng)絡(luò)下，降低動(dòng)畫幀率或簡化動(dòng)畫效果，以提升性能。

實(shí)現(xiàn)方式：

• 根據(jù)設(shè)備性能設(shè)置不同動(dòng)畫版本（低配版 / 高配版）
• 或者動(dòng)態(tài)調(diào)整 animationSpeed

this.anim.setSpeed(0.5); // 降低播放速度，節(jié)省性能

閱讀原文：原文鏈接