Pembuatan: Netlify ' s Million Devs SVG Site Animation

Artikel ini memperincikan penciptaan mikrosit "Million Devs" Netlify, yang memberi tumpuan kepada proses animasi. Laman ini menggunakan SVG yang besar sebagai asasnya, dengan bijak dipecahkan ke dalam komponen VUE yang boleh diurus untuk pengurusan dan manipulasi yang lebih mudah.

Membina aplikasi Vue dalam SVG

SVG bertindak sebagai sistem koordinat (berfikir Battleship!), Dengan x, y, lebar, dan elemen yang menentukan ketinggian. Aplikasi VUE utama mengandungi tajuk dan SVG yang besar. SVG ini terus diburukkan lagi ke dalam komponen Vue yang lebih kecil dan boleh diguna semula:

• Laluan: Komponen berasingan untuk pandangan desktop dan mudah alih, dikawal oleh VUEX State.
• Stesen: 27 komponen stesen individu (plus label teks), bersama -sama dengan unsur -unsur hiasan (pokok, semak, dll.), Yang dianjurkan oleh tahun untuk organisasi yang lebih baik.
• "Anda berada di sini" penanda: Secara kondisif untuk pandangan desktop dan pengguna log masuk.

Fleksibiliti SVG membolehkan SVG bersarang, menentukan x, y, lebar, dan ketinggian setiap anak SVG untuk meletakkannya dengan tepat di dalam ibu bapa.<g></g> Unsur -unsur (serupa dengan HTML Divs) komponen kumpulan. Contoh komponen setahun:

<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>27 Mei 2020</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>

Perhatikan pemuatan komponen segerak dan tidak segerak untuk pengoptimuman prestasi.

Animasi SVG dengan GSAP dan Scrolltrigger

Animasi Leverage Greensock (GSAP) dan plugin Scrolltriggernya. Logik Animasi Teras:

 import {GSAP} dari "GSAP";
import {scrolltrigger} dari "gsap/scrolltrigger.js";
import {MapState} dari "Vuex";

GSAP.RegisterPlugin (ScrollTrigger);

Eksport Lalai {
  dikira: {
    ... mapstate (["toggleconfig", "startconfig", "isanimationdisabled", "viewportSize"]),
  },
  Kaedah: {
    jilbilyanim () {
      biarkan vm = ini;
      Biarkan TL;
      const isscrollelconfig = {
        Scrolltrigger: {
          Pencetus: `.million $ {vm.num}`,
          toggleactions: this.toggleconfig,
          Mula: this.startconfig,
        },
        Lalai: {
          Tempoh: 1.5,
          kemudahan: "sine",
        },
      };
      // ... logik animasi ...
    },
  },
  dipasang () {
    this.millionanim ();
  },
};

VUEX menguruskan toggleConfig (mengawal pencetus animasi) dan startConfig (menentukan titik permulaan animasi). Animasi spanduk ditangani secara berbeza daripada animasi yang dicetuskan tatal. Timelines menggunakan label untuk kawalan animasi yang tepat. Contoh animasi kaki berayun:

 tl.add (`juta $ {vm.num}`)
  . dari (
    "#front-leg-r",
    {
      Tempoh: 0.5,
      putaran: 10,
      Transformorigin: "50% 0%",
      Ulang: 6,
      Yoyo: Benar,
      kemudahan: "sine.inout",
    },
    `juta $ {vm.num}`
  )
  . dari (
    "#Front-Leg-l",
    {
      Tempoh: 0.5,
      putaran: 10,
      Transformorigin: "50% 0%",
      Ulang: 6,
      Yoyo: Benar,
      kemudahan: "sine.inout",
    },
    `juta $ {vm.num} = 0.25`
  );

Animasi Togol dan Kebolehcapaian

Togol yang dikawal oleh VUEX membolehkan pengguna melumpuhkan animasi. Negeri isAnimationDisabled ditonton, dan animasi scrolltrigger dijeda atau ditetapkan semula dengan sewajarnya, tanpa menggunakan .kill() untuk membolehkan memulakan semula.

Pertimbangan kebolehcapaian termasuk menggunakan role="img" untuk unsur -unsur hiasan dan ID dan tajuk unik untuk elemen interaktif, memastikan pembaca skrin dapat menavigasi tapak dengan berkesan. Contoh komponen teks menunjukkan cara menjadikan teks SVG dapat diakses:

<template>
  <a :href="https://www.php.cn/link/8f7f2375ba3e2ee3adf67d0e32c683d5">
    </a>
      <title id="analyticsuklaunch">Pelancaran analisis</title>
      <g>
        <text transform="translate(7.6 14)"><slot name="date">13 Jul 2016</slot></text>
        <text transform="translate(16.5 48.7)"><slot name="event">Sesuatu di sini</slot></text>
        <text transform="translate(16.5 70)"><slot name="event2"></slot></text>
        <text transform="translate(164.5 104.3)">Lihat Milestone</text>
      </g>
    
  
</template>

Repositori GitHub projek adalah sumber terbuka. Penulis mengakui sumbangan rakan sekerja mereka.

Atas ialah kandungan terperinci Pembuatan: Netlify ' s Million Devs SVG Site Animation. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!