作成：Netlify＆＃039; s Million Devs SVGアニメーションサイト

この記事では、Animationプロセスに焦点を当てたNetlifyの「Million Devs」マイクロサイトの作成について詳しく説明しています。このサイトは、大規模なSVGをその基礎として使用し、管理可能なVUEコンポーネントに巧妙に分割され、管理と操作を容易にします。

SVG内にVueアプリを構築します

SVGは、x、y、幅、および高さを定義する要素を備えた座標系（戦艦！）として機能します。メインVUEアプリには、ヘッダーと単一の巨大なSVGが含まれています。このSVGは、さらに小さく再利用可能なVueコンポーネントに分解されます。

• パス： Vuex Stateによって制御されるデスクトップおよびモバイルビュー用の個別のコンポーネント。
• ステーション： 27個の個別のステーションコンポーネント（プラステキストラベル）、装飾的な要素（木、茂みなど）、より良い組織のために年ごとに編成されています。
• 「あなたはここにいる」マーカー：デスクトップビューやログインユーザー用に条件付きでレンダリングされます。

SVGの柔軟性により、ネストされたSVGが可能になり、各子供SVGのx、y、幅、および高さを定義して、親に正確に配置します。<g></g>要素（HTML Divsと同様）グループコンポーネント。 1年のコンポーネントの例：

<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 Virtual</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"]）、
  }、
  方法：{
    millionanim（）{
      vm = this;
      tlを挙げます。
      const isscrollelconfig = {
        scrolltrigger：{
          トリガー： `.million $ {vm.num}`、
          ToggleActions：this.toggleconfig、
          開始：this.startconfig、
        }、
        デフォルト：{
          期間：1.5、
          使いやすさ：「サイン」、
        }、
      };
      // ...アニメーションロジック...
    }、
  }、
  mounted（）{
    this.millionanim（）;
  }、
};

Vuexは、 toggleConfig （コントロールアニメーショントリガー）とstartConfig （アニメーションのスタートポイントの定義）を管理します。バナーアニメーションは、スクロールトリガーアニメーションとは異なる方法で処理されます。タイムラインは、正確なアニメーションコントロールにラベルを使用します。脚のスイングアニメーションの例：

 Tl.Add（ `百万$ {vm.num}`）
  。から（
    "＃front-leg-r"、
    {
      期間：0.5、
      回転：10、
      Transformorigin：「50％0％」、
      繰り返し：6、
      ヨーヨ：本当、
      使いやすさ：「sine.inout」、
    }、
    `百万$ {vm.num}`
  ））
  。から（
    "＃front-leg-l"、
    {
      期間：0.5、
      回転：10、
      Transformorigin：「50％0％」、
      繰り返し：6、
      ヨーヨ：本当、
      使いやすさ：「sine.inout」、
    }、
    `百万$ {vm.num} = 0.25`
  ）;

アニメーションのトグルとアクセシビリティ

VUEX制御のトグルにより、ユーザーはアニメーションを無効にします。 isAnimationDisabled状態が監視され、Scrolltriggerアニメーションは、 .kill()を使用して再起動を許可することなく、それに応じて一時停止またはリセットされます。

アクセシビリティの考慮事項には、装飾的な要素にrole="img"を使用し、インタラクティブな要素の一意のIDとタイトルを使用することが含まれ、画面読者がサイトを効果的にナビゲートできるようにすることが含まれます。テキストコンポーネントの例は、SVGテキストをアクセスできるようにする方法を示しています。

<template>
  <a :href="https://www.php.cn/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 中国語 Web サイトの他の関連記事を参照してください。