91网首页-91网页版-91网在线观看-91网站免费观看-91网站永久视频-91网站在线播放

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

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

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

Lottie動(dòng)畫(huà)

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

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

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

對(duì)比

實(shí)戰(zhàn)

簡(jiǎn)單寫(xiě)一個(gè)Lottie動(dòng)畫(huà)在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)畫(huà)」 時(shí)，雖然 Lottie 本身具有體積小、渲染高效等優(yōu)點(diǎn)，但如果動(dòng)畫(huà)文件較多或較大，仍可能對(duì)頁(yè)面加載速度和性能產(chǎn)生影響。

?

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

?

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

「按需加載」

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

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

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

  observer.observe(this.$el);
}

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

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

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

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

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

「壓縮JSON文件」

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

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

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

npx lottie-minify animation.json > optimized.json

「CDN托管」

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

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

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

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

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

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

閱讀原文：原文鏈接