anton-abyzov/vskill

Web Animations API für HyperFrames

HyperFrames kann Web Animations API-Animationen durch seinen waapi-Laufzeitadapter suchen. WAAPI ist nützlich, wenn Sie native Browser-Keyframes mit JavaScript-erstelltem Timing und ohne GSAP-Abhängigkeit verwenden möchten.

Vertrag

• Erstellen Sie Animationen synchron während der Initialisierung der Komposition.
• Verwenden Sie element.animate(...) mit endlicher duration und iterations.
• Verwenden Sie fill: "both", damit gesuchte Zustände bestehen bleiben.
• Pausieren Sie Animationen nach der Erstellung oder lassen Sie den Adapter sie beim ersten Suchen pausieren.
• Vermeiden Sie Callbacks und Promises für rendertritischen Zustand.

Der Adapter ruft document.getAnimations() auf, setzt currentTime jeder Animation auf die HyperFrames-Zeit in Millisekunden und pausiert sie dann.

Grundlegendes Muster

<div id="orb" class="clip orb" data-start="2" data-duration="3" data-track-index="2"></div>

<script>
  const orb = document.getElementById("orb");
  const animation = orb.animate(
    [
      { transform: "translate3d(-160px, 0, 0) scale(0.8)", opacity: 0 },
      { transform: "translate3d(0, 0, 0) scale(1)", opacity: 1, offset: 0.35 },
      { transform: "translate3d(120px, 0, 0) scale(1.08)", opacity: 1 },
    ],
    {
      duration: 3000,
      delay: 2000,
      easing: "cubic-bezier(0.2, 0, 0, 1)",
      fill: "both",
      iterations: 1,
    },
  );

  animation.pause();
</script>

Gestaffeltes Muster

document.querySelectorAll(".token").forEach((token, index) => {
  const animation = token.animate(
    [
      { transform: "translateY(24px)", opacity: 0 },
      { transform: "translateY(0)", opacity: 1 },
    ],
    {
      duration: 620,
      delay: index * 80,
      easing: "cubic-bezier(0.2, 0, 0, 1)",
      fill: "both",
      iterations: 1,
    },
  );
  animation.pause();
});

Gute Anwendungsfälle

• Leichte DOM-Bewegungen, bei denen CSS-Keyframes zu starr und GSAP unnötig ist.
• Generierte Animationen aus strukturierten Daten.
• Einfache Zeitachsen, die als Keyframes, Verzögerungen und Offsets dargestellt werden können.

Vermeiden Sie

• Unendliche iterations.
• Abhängigkeit von animation.finished, um rendertritischen DOM zu mutieren.
• Ausführen separater Uhren mit requestAnimationFrame, Timern oder performance.now().
• Animieren von Layouteigenschaften, wenn Transformationen und Deckkraft die Bewegung ausdrücken können.
• Annahme, dass die clip-lokale Startzeit automatisch ist. Der WAAPI-Adapter sucht die Dokument-Ebene der Animationszeit; modellieren Sie Clip-Offsets mit delay oder erstellen Sie die Animation auf einem Element, dessen Sichtbarkeit durch das HyperFrames-Timing gesteuert wird.

Validierung

Nach dem Bearbeiten einer WAAPI-Komposition:

npx hyperframes lint
npx hyperframes validate

Credits und Referenzen

• HyperFrames-Adapterquelle: packages/core/src/runtime/adapters/waapi.ts.
• MDN Web Animations API-Anleitung: https://developer.mozilla.org/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API
• MDN Animation.currentTime: https://developer.mozilla.org/en-US/docs/Web/API/Animation/currentTime