heygen-com/animejs

animejs은(는) 무엇을 하나요?

HyperFrames용 Anime.js 어댑터 패턴. HyperFrames 컴포지션 내에서 Anime.js 애니메이션 또는 타임라인을 작성하거나, window.__hfAnime에 애니메이션을 등록하거나, Anime.js를 seek 기반 및 결정론적으로 만들거나, Anime.js 예제를 렌더링 안전한 HyperFrames HTML로 변환할 때 사용합니다.

개요

이 스킬은 Anime.js를 HyperFrames에서 원활하게 사용할 수 있도록 설계되었습니다. 기존 Anime.js 예제를 가져와서 HyperFrames의 렌더링 파이프라인에 맞게 조정하는 데 중점을 둡니다.

사용 방법

애니메이션 등록

모든 Anime.js 애니메이션은 window.__hfAnime에 등록되어야 합니다. 예를 들어:

const animation = anime({
  targets: '.element',
  translateX: 250,
  duration: 1000,
  easing: 'easeInOutQuad'
});

// HyperFrames에 등록
window.__hfAnime = window.__hfAnime || [];
window.__hfAnime.push(animation);

Seek 기반 애니메이션

HyperFrames는 seek 기반 렌더링을 사용합니다. 애니메이션을 seek 가능하게 만들려면:

const animation = anime({
  targets: '.element',
  translateX: 250,
  autoplay: false, // 자동 재생 비활성화
  duration: 1000
});

window.__hfAnime = window.__hfAnime || [];
window.__hfAnime.push(animation);

그런 다음 HyperFrames가 제공하는 seek 값으로 애니메이션을 제어할 수 있습니다.

예제 변환

기존 Anime.js 예제를 변환할 때:

1. 모든 애니메이션 정의를 window.__hfAnime에 등록합니다.
2. autoplay: false를 설정하여 seek 제어를 활성화합니다.
3. HyperFrames의 렌더링 사이클과 호환되도록 애니메이션을 조정합니다.

참고 사항

• HyperFrames는 Anime.js의 비동기적 특성을 동기적으로 변환하여 렌더링 안전성을 보장합니다.
• 모든 애니메이션은 선언적으로 정의되어야 하며, 상태 변경은 피해야 합니다.
• 타임라인 애니메이션도 동일한 패턴을 따릅니다.

지원 플랫폼

• Cursor
• Windsurf
• Claude Desktop
• 기타 HyperFrames 호환 도구