隨著網頁效果越來越絢麗，頁面的動效也越來越復雜，各種動畫方案層出不窮。

目前常規的幾種動畫方案比如「Gif動圖、CSS3動畫、SVG動畫、Canvas動畫各有利弊」。

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

Lottie動畫

Lottie 是一種基于 「JSON」 的輕量級動畫格式，它由 Airbnb 開發并開源，專門用于在網頁和移動應用中高效地渲染高質量的矢量動畫。

簡單總結一下Lottie動畫的優點大概是：

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

對比

實戰

簡單寫一個Lottie動畫在Vue中的實現(需要使用 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>

優化

在項目中使用 「Lottie 動畫」 時，雖然 Lottie 本身具有體積小、渲染高效等優點，但如果動畫文件較多或較大，仍可能對頁面加載速度和性能產生影響。

?

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

?

優化基本上有以下幾種方案：

「按需加載」

實現方式：

• 使用 IntersectionObserver 監聽元素是否進入視口。
• 或者結合 Vue 的 v-if 控制組件的渲染時機。

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

  observer.observe(this.$el);
}

「預加載關鍵動畫」

對于首頁或用戶首次訪問必須展示的關鍵動畫，提前進行異步加載，但延遲播放。

實現方式：

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

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

「壓縮JSON文件」

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

可以考慮使用LottieFiles Optimizer、lottie-minify進行壓縮。

實現方式：

npx lottie-minify animation.json > optimized.json

「CDN托管」

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

「降低動畫播放質量」

在低端設備或慢速網絡下，降低動畫幀率或簡化動畫效果，以提升性能。

實現方式：

• 根據設備性能設置不同動畫版本（低配版 / 高配版）
• 或者動態調整 animationSpeed

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

閱讀原文：原文鏈接