heygen-com/animejs

Que fait animejs ?

Modèles d'adaptation d'Anime.js pour HyperFrames. Utilisez ce skill lors de l'écriture d'animations ou de timelines Anime.js dans des compositions HyperFrames, de l'enregistrement d'animations sur window.__hfAnime, de la transformation d'Anime.js en un système déterministe piloté par la recherche, ou de la traduction d'exemples Anime.js en HTML HyperFrames sécurisé pour le rendu.

Pourquoi ce skill est utile

Dans HyperFrames, les animations doivent être contrôlables par le moteur de rendu pour garantir des transitions fluides et un comportement prédictible. Anime.js n'est pas conçu nativement pour HyperFrames ; il crée des instances d'animation flottantes qui peuvent interférer avec le rendu. Ce skill résout ce problème en enregistrant chaque animation sur window.__hfAnime, permettant à HyperFrames de les gérer comme des ressources déterministes.

Comment l'utiliser

Enregistrement d'une animation

const animation = anime({
  targets: '.mon-element',
  translateX: 100,
  duration: 1000
});

// Enregistrer l'animation sur window.__hfAnime
window.__hfAnime['mon-animation'] = animation;

Rendre une animation pilotée par la recherche

Pour que HyperFrames puisse contrôler la progression de l'animation via la recherche, utilisez la propriété autoplay: false et mettez à jour manuellement le seek :

const animation = anime({
  targets: '.mon-element',
  translateX: [0, 100],
  duration: 1000,
  autoplay: false
});

window.__hfAnime['mon-animation-seek'] = animation;

// Mettre à jour la progression
animation.seek(500); // 500ms

Traduire un exemple Anime.js standard

Lorsque vous traduisez un exemple Anime.js trouvé en ligne, adaptez-le ainsi :

1. Remplacez les sélecteurs CSS par des sélecteurs compatibles HyperFrames (par exemple, utilisez des classes uniques).
2. Ajoutez autoplay: false pour éviter les démarrages automatiques.
3. Enregistrez l'instance sur window.__hfAnime.
4. Utilisez animation.seek(progression) au lieu de animation.play().

Exemple complet

<div id="app">
  <div class="boite">Animation</div>
</div>

<script>
// Créer l'animation
const anim = anime({
  targets: '.boite',
  translateY: [0, -50],
  opacity: [1, 0.5],
  duration: 800,
  easing: 'easeInOutQuad',
  autoplay: false
});

// Enregistrer dans HyperFrames
window.__hfAnime = window.__hfAnime || {};
window.__hfAnime['boite-anim'] = anim;

// Plus tard, pour contrôler la progression :
// anim.seek(400); // par exemple
</script>

Plateformes supportées

Ce skill est conçu pour être utilisé avec HyperFrames et Anime.js (version 3.x). Il fonctionne dans tout environnement où ces bibliothèques sont chargées, notamment les agents Claude Code, Cursor, Codex, et tout système d'IA compatible avec les spécifications skill markdown.

Notes importantes

• Assurez-vous qu'Anime.js est chargé avant d'utiliser ce skill.
• La propriété window.__hfAnime doit être initialisée si elle n'existe pas.
• Les animations enregistrées doivent avoir un nom unique pour éviter les collisions.