Das Erstellen von: netlify ' S million devs SVG -Animationsstandort

In diesem Artikel wird die Erstellung von Netlify 'Million Devs "Microsite beschrieben, der sich auf den Animationsprozess konzentriert. Der Standort verwendet eine große SVG als Fundament, die geschickt in überschaubare VUE -Komponenten unterteilt ist, um das Management und die Manipulation zu erleichtern.

Erstellen einer VUE -App innerhalb eines SVG

Das SVG fungiert als Koordinatensystem (denken Sie an Schlachtschiff!), Mit X, Y, Breite und Höhendefinition. Die Haupt -Vue -App enthält den Kopfzeile und eine einzelne, massive SVG. Dieser SVG wird weiter in kleinere, wiederverwendbare Vue -Komponenten zerlegt:

• Pfade: Separate Komponenten für Desktop- und Mobilansichten, gesteuert von Vuex -Status.
• Stationen: 27 Einzelstationskomponenten (plus Textetiketten) sowie dekorative Elemente (Bäume, Büsche usw.), die nach Jahr für eine bessere Organisation organisiert sind.
• "Sie sind hier" Marker: Bedingungen für Desktop-Ansichten und angemeldete Benutzer.

Die Flexibilität von SVG ermöglicht verschachtelte SVGs, die X, Y, Breite und Höhe jedes Kinder -SVG definieren, um sie genau innerhalb des Elternteils zu positionieren.<g></g> Elemente (ähnlich wie HTML Divs) Gruppenkomponenten. Ein Jahr Komponentenbeispiel:

<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. Mai 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>

Beachten Sie die synchrone und asynchrone Belastung von Komponenten für die Leistungsoptimierung.

SVG -Animation mit GSAP und Scrolltrigger

Animationen nutzen Greensock (GSAP) und sein Scrolltrigger -Plugin. Die Kernanimationslogik:

 importieren {gsap} aus "GSAP";
import {scrolltrigger} aus "gsap/scrolltrigger.js";
import {mapState} aus "vuex";

gsap.registerplugin (scrolltrigger);

Standard ausführen {
  berechnet: {
    ... MapState (["ToggleConfig", "StartConfig", "IsanimationDisabled", "ViewPortSize"]),)
  },
  Methoden: {
    Millionanim () {
      sei VM = dies;
      lass tl;
      const isscrollelconfig = {
        Scrolltrigger: {
          Auslöser: `.million $ {vm.num}`,,
          Toggleactions: this.toggleconfig,
          Start: this.startconfig,
        },
        Standardeinstellungen: {
          Dauer: 1.5,
          Leichtigkeit: "Sinus",
        },
      };
      // ... Animationslogik ...
    },
  },
  montiert () {
    this.millionanim ();
  },
};

Vuex verwaltet toggleConfig (Steuerung von Animation Triggers) und startConfig (Definieren von Animationsstartpunkten). Banneranimationen werden unterschiedlich behandelt als von scrollen ausgelöste Animationen. Zeitleisten verwenden Etiketten für eine präzise Animationskontrolle. Ein Beispiel für Beinschwingungsanimation:

 tl.add (`Millionen $ {vm.num}`)
  .aus(
    "#Front-Leg-R",
    {
      Dauer: 0,5,
      Rotation: 10,
      Transformorigin: "50% 0%",
      Wiederholen: 6,
      Yoyo: wahr,
      Leichtigkeit: "Sine.inout",
    },
    `Millionen $ {vm.num}`
  )
  .aus(
    "#Front-leg-l",
    {
      Dauer: 0,5,
      Rotation: 10,
      Transformorigin: "50% 0%",
      Wiederholen: 6,
      Yoyo: wahr,
      Leichtigkeit: "Sine.inout",
    },
    `Millionen $ {vm.num} = 0,25`
  );

Animationsumschüttung und Zugänglichkeit

Mit einem Vuex-kontrollierten Umschalter können Benutzer Animationen deaktivieren. Der isAnimationDisabled -Zustand wird beobachtet, und Scrolltrigger -Animationen werden angehalten oder entsprechend zurückgesetzt, ohne .kill() zu verwenden, um das Neustart zu ermöglichen.

Überlegungen zur Zugänglichkeit umfassen die Verwendung von role="img" für dekorative Elemente und eindeutige IDs und Titel für interaktive Elemente, um sicherzustellen, dass die Bildschirmleser effektiv auf der Website navigieren können. Das Beispiel für Textkomponenten zeigt, wie SVG -Text zugänglich gemacht wird:

<template>
  <a :href="https://www.php.cn/link/8f7f2375ba3e2ee3adf67d0e32c683d5">
    </a>
      <title id="analyticsuklaunch">Start von Analytics</title>
      <g>
        <text transform="translate(7.6 14)"><slot name="date">13. Juli 2016</slot></text>
        <text transform="translate(16.5 48.7)"><slot name="event">Etwas hier</slot></text>
        <text transform="translate(16.5 70)"><slot name="event2"></slot></text>
        <text transform="translate(164.5 104.3)">Meilenstein anzeigen</text>
      </g>
    
  
</template>

Das Github-Repository des Projekts ist Open-Source. Der Autor erkennt die Beiträge ihrer Kollegen an.

Das obige ist der detaillierte Inhalt vonDas Erstellen von: netlify ' S million devs SVG -Animationsstandort. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!