netlify＆＃039; s million devs svg動畫網站的製作

本文詳細介紹了Netlify的“百萬開發器”微型網站的創建，重點是動畫過程。該網站使用大型SVG作為其基礎，巧妙地將其分解為可管理的VUE組件，以便於管理和操縱。

在SVG中構建VUE應用程序

SVG充當坐標系（想想戰艦！），X，Y，寬度和高度定義元素。主VUE應用程序包含標題和一個龐大的SVG。該SVG進一步分解為較小的可重複使用的VUE組件：

• 路徑：由Vuex狀態控制的桌面和移動視圖的單獨組件。
• 電台： 27個單個電台組件（加上文本標籤），以及一年來組織的裝飾元素（樹木，灌木叢等），以便更好地組織。
• “您在這裡”標記：有條件地呈現桌面視圖和登錄用戶。

SVG的靈活性允許嵌套的SVG，定義每個孩子SVG的X，Y，寬度和高度，以精確地將其定位在父級內。<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>

注意組件的同步和異步加載，以進行性能優化。

使用GSAP和SCROLLTRIGGER的SVG動畫

動畫利用Greensock（GSAP）及其Scrolltrigger插件。核心動畫邏輯：

從“ GSAP”導入{GSAP};
從“ gsap/scrolltrigger.js”導入{scrolltrigger};
從“ vuex”導入{mapState};

gsap.registerplugin（scrolltrigger）;

導出默認{
  計算：{
    ... MapState（[“ toggleconfig”，“ startConfig”，“ isanimationDisabled”，“ viewportsize”]），），），
  }，，
  方法： {
    百萬anim（）{
      令vm = this;
      令TL;
      const isscrollelConfig = {
        scrolltrigger：{
          觸發器：`。百萬$ {vm.num}`，
          toggleactions：this.toggleconfig，
          開始：this.startconfig，
        }，，
        預設值:{
          持續時間：1.5，
          輕鬆：“正弦”，
        }，，
      };
      // ...動畫邏輯...
    }，，
  }，，
  安裝（）{
    this.millionanim（）;
  }，，
};

Vuex管理toggleConfig （控制動畫觸發器）和startConfig （定義動畫起點）。橫幅動畫的處理方式與滾動觸發的動畫不同。時間表使用標籤進行精確的動畫控制。揮舞腿動畫的一個例子：

 tl.add（`百萬美元$ {vm.num}`）
  。從（
    “＃前腿R”，
    {
      持續時間：0.5，
      旋轉：10，
      變形金學：“ 50％0％”，
      重複：6，
      Yoyo：是的，
      輕鬆：“正弦”，
    }，，
    `百萬$ {vm.num}`
  ）
  。從（
    “＃前腿l”，
    {
      持續時間：0.5，
      旋轉：10，
      變形金學：“ 50％0％”，
      重複：6，
      Yoyo：是的，
      輕鬆：“正弦”，
    }，，
    `百萬$ {vm.num} = 0.25`
  ）；

動畫切換和可訪問性

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

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

<template>
  <a :href="//m.sbmmt.com/link/8f7f2375ba3e2ee3adf67d0e32c683d5">
    </a>
      <title id="analyticsuklaunch">啟動分析</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>

該項目的GitHub存儲庫是開源的。作者承認同事的貢獻。

以上是netlify＆＃039; s million devs svg動畫網站的製作的詳細內容。更多資訊請關注PHP中文網其他相關文章！