本文詳細(xì)介紹了Netlify的“百萬開發(fā)器”微型網(wǎng)站的創(chuàng)建，重點(diǎn)是動(dòng)畫過程。該網(wǎng)站使用大型SVG作為其基礎(chǔ)，巧妙地將其分解為可管理的VUE組件，以便于管理和操縱。

在SVG中構(gòu)建VUE應(yīng)用程序

SVG充當(dāng)坐標(biāo)系（想想戰(zhàn)艦?。琗，Y，寬度和高度定義元素。主VUE應(yīng)用程序包含標(biāo)題和一個(gè)龐大的SVG。該SVG進(jìn)一步分解為較小的可重復(fù)使用的VUE組件：

• 路徑：由Vuex狀態(tài)控制的桌面和移動(dòng)視圖的單獨(dú)組件。
• 電臺(tái)： 27個(gè)單個(gè)電臺(tái)組件（加上文本標(biāo)簽），以及一年來組織的裝飾元素（樹木，灌木叢等），以便更好地組織。
• “您在這里”標(biāo)記：有條件地呈現(xiàn)桌面視圖和登錄用戶。

SVG的靈活性允許嵌套的SVG，定義每個(gè)孩子SVG的X，Y，寬度和高度，以精確地將其定位在父級內(nèi)。<g></g>元素（類似于HTML DIVS）組組件。一年組件示例：

<template>
  <g>
    <app-tree x="650" y="5500"></app-tree>
    <app-tree x="700" y="5550"></app-tree>
    <app-bush x="750" y="5600"></app-bush>
    <app-virtual x="1200" xsmall="50" y="6000" ysmall="15100"></app-virtual>
    <app-text num="20" url-slug="jamstack-conf-virtual" x="1400" xsmall="50" y="6500" ysmall="15600">
      <template v-slot:date>2020年5月27日</template>
      <template v-slot:event>jamstack conf虛擬</template>
    </app-text>
    ...
  </g>
</template>

<script>
import {
  AppText,
  AppTree,
  AppBush,
  AppStreetlamp2,
} from "@/components";
export default {
  components: {
    AppText,
    AppTree,
    AppBush,
    AppStreetlamp2,
    AppBuildPlugins: () => import("@/components/AppBuildPlugins.vue"),
    AppMillion: () => import("@/components/AppMillion.vue"),
    AppVirtual: () => import("@/components/AppVirtual.vue"),
  },
};
</script>

注意組件的同步和異步加載，以進(jìn)行性能優(yōu)化。

使用GSAP和SCROLLTRIGGER的SVG動(dòng)畫

動(dòng)畫利用Greensock（GSAP）及其Scrolltrigger插件。核心動(dòng)畫邏輯：

從“ GSAP”導(dǎo)入{GSAP};
從“ gsap/scrolltrigger.js”導(dǎo)入{scrolltrigger};
從“ vuex”導(dǎo)入{mapState};

gsap.registerplugin（scrolltrigger）;

導(dǎo)出默認(rèn){
  計(jì)算：{
    ... MapState（[“ toggleconfig”，“ startConfig”，“ isanimationDisabled”，“ viewportsize”]），），），
  }，，
  方法： {
    百萬anim（）{
      令vm = this;
      令TL;
      const isscrollelConfig = {
        scrolltrigger：{
          觸發(fā)器：`。百萬$ {vm.num}`，
          toggleactions：this.toggleconfig，
          開始：this.startconfig，
        }，，
        默認(rèn)值：{
          持續(xù)時(shí)間：1.5，
          輕松：“正弦”，
        }，，
      };
      // ...動(dòng)畫邏輯...
    }，，
  }，，
  安裝（）{
    this.millionanim（）;
  }，，
};

Vuex管理toggleConfig （控制動(dòng)畫觸發(fā)器）和startConfig （定義動(dòng)畫起點(diǎn)）。橫幅動(dòng)畫的處理方式與滾動(dòng)觸發(fā)的動(dòng)畫不同。時(shí)間表使用標(biāo)簽進(jìn)行精確的動(dòng)畫控制。揮舞腿動(dòng)畫的一個(gè)例子：

 tl.add（`百萬美元$ {vm.num}`）
  。從（
    “＃前腿R”，
    {
      持續(xù)時(shí)間：0.5，
      旋轉(zhuǎn)：10，
      變形金學(xué)：“ 50％0％”，
      重復(fù)：6，
      Yoyo：是的，
      輕松：“正弦”，
    }，，
    `百萬$ {vm.num}`
  ）
  。從（
    “＃前腿l”，
    {
      持續(xù)時(shí)間：0.5，
      旋轉(zhuǎn)：10，
      變形金學(xué)：“ 50％0％”，
      重復(fù)：6，
      Yoyo：是的，
      輕松：“正弦”，
    }，，
    `百萬$ {vm.num} = 0.25`
  ）；

動(dòng)畫切換和可訪問性

VUEX控制的切換使用戶可以禁用動(dòng)畫。觀看isAnimationDisabled狀態(tài)，并相應(yīng)地暫停或重置ScrollTrigger動(dòng)畫，而無需使用.kill()允許重新啟動(dòng)。

可訪問性考慮因素包括使用role="img"作為裝飾元素，以及用于交互式元素的唯一ID和標(biāo)題，以確保屏幕讀取器可以有效地導(dǎo)航該網(wǎng)站。文本組件示例顯示了如何使SVG文本可訪問：

<template>
  <a :href="http://miracleart.cn/link/8f7f2375ba3e2ee3adf67d0e32c683d5">
    </a>
      <title id="analyticsuklaunch">啟動(dòng)分析</title>
      <g>
        <text transform="translate(7.6 14)"><slot name="date">2016年7月13日</slot></text>
        <text transform="translate(16.5 48.7)"><slot name="event">這里的東西</slot></text>
        <text transform="translate(16.5 70)"><slot name="event2"></slot></text>
        <text transform="translate(164.5 104.3)">查看里程碑</text>
      </g>
    
  
</template>

該項(xiàng)目的GitHub存儲(chǔ)庫是開源的。作者承認(rèn)同事的貢獻(xiàn)。

以上是netlify＆＃039; s million devs svg動(dòng)畫網(wǎng)站的制作的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！