La fabrication du site d'animation SVG de NetLify

Cet article détaille la création du microsite "Million Devs" de Netlify, en se concentrant sur le processus d'animation. Le site utilise un grand SVG comme base, intelligemment décomposé en composants Vue gérables pour une gestion et une manipulation plus faciles.

Construire une application Vue dans un SVG

Le SVG agit comme un système de coordonnées (pensez au cuirassé!), Avec des éléments définissant x, y, y, largeur et hauteur. L'application Vue principale contient l'en-tête et un seul SVG massif. Ce SVG est encore décomposé en composants Vue plus petits et réutilisables:

• Chemins: composants séparés pour les vues de bureau et mobiles, contrôlés par Vuex State.
• Stations: 27 composants de la station individuelle (plus étiquettes de texte), ainsi que des éléments décoratifs (arbres, buissons, etc.), organisés par année pour une meilleure organisation.
• "Vous êtes ici" Marker: rendu conditionnellement pour les vues de bureau et les utilisateurs connectés.

La flexibilité du SVG permet aux SVG imbriqués, définissant la largeur X, Y, la largeur et la hauteur de chaque enfant SVG pour le positionner avec précision dans le parent.<g></g> Éléments (similaires aux Divs HTML) composants de groupe. Exemple de composant d'un an:

<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 confr 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>

Remarquez la charge synchrone et asynchrone des composants pour l'optimisation des performances.

Animation SVG avec GSAP et Scrolltrigger

Les animations levier sur Greensock (GSAP) et son plugin ScrollTrigger. La logique d'animation principale:

 import {gsap} de "gsap";
import {ScrollTrigger} à partir de "gsap / scrolltrigger.js";
import {MapState} de "Vuex";

gsap.registerPlugin (scrolltrigger);

Exporter par défaut {
  calculé: {
    ... mapState (["toggleConfig", "startConfig", "isanimationdisabled", "viseil"]),
  },
  Méthodes: {
    Millionanim () {
      Soit VM = ceci;
      Soit tl;
      const isscrollelconfig = {
        scrolltrigger: {
          Trigger: `.Million $ {vm.num}`,
          togglections: this.toggleconfig,
          Démarrer: this.startConfig,
        },
        par défaut: {
          Durée: 1,5,
          Facilité: "Sine",
        },
      };
      // ... Logique d'animation ...
    },
  },
  monté () {
    this.millionanim ();
  },
};

Vuex gère toggleConfig (Contrôle des déclencheurs d'animation) et startConfig (définition des points de départ de l'animation). Les animations de bannière sont gérées différemment des animations déclenchées par défilement. Les délais utilisent des étiquettes pour un contrôle d'animation précis. Un exemple d'animation à l'éstuation des jambes:

 tl.add (`Million $ {vm.num}`)
  .depuis(
    "# front-leg-r",
    {
      Durée: 0,5,
      Rotation: 10,
      Transformorigin: "50% 0%",
      répéter: 6,
      yoyo: vrai,
      facilité: "sine.inout",
    },
    `Million $ {vm.num}`
  )
  .depuis(
    "# front-leg-l",
    {
      Durée: 0,5,
      Rotation: 10,
      Transformorigin: "50% 0%",
      répéter: 6,
      yoyo: vrai,
      facilité: "sine.inout",
    },
    `Million $ {vm.num} = 0,25`
  ));

Animation bascule et accessibilité

Une bascule contrôlée par Vuex permet aux utilisateurs de désactiver les animations. L'état isAnimationDisabled est regardé et les animations de défilement sont interrompues ou réinitialisées en conséquence, sans utiliser .kill() pour permettre le redémarrage.

Les considérations d'accessibilité incluent l'utilisation role="img" pour les éléments décoratifs et les identifiants et titres uniques pour les éléments interactifs, en garantissant que les lecteurs d'écran peuvent naviguer efficacement sur le site. L'exemple de composant de texte montre comment rendre le texte SVG accessible:

<template>
  <a :href="https://www.php.cn/link/8f7f2375ba3e2ee3adf67d0e32c683d5">
    </a>
      <title id="analyticsuklaunch">Lancement de l'analyse</title>
      <g>
        <text transform="translate(7.6 14)"><slot name="date">13 juillet 2016</slot></text>
        <text transform="translate(16.5 48.7)"><slot name="event">Quelque chose ici</slot></text>
        <text transform="translate(16.5 70)"><slot name="event2"></slot></text>
        <text transform="translate(164.5 104.3)">Voir le jalon</text>
      </g>
    
  
</template>

Le référentiel GitHub du projet est open-source. L'auteur reconnaît les contributions de leurs collègues.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!