AIKraft/AI/Войти
AIKraft/Skills/animejs

animejs

Адаптер Anime.js для HyperFrames: делает анимации управляемыми через seek(timeMs) и детерминированными. Используйте при создании анимаций в HyperFrames, регистрируя их на window.__hfAnime с autoplay: false.

HEHeyGen official Разработка ★ 56.7k

Что делает навык

Навык предоставляет адаптер Anime.js для HyperFrames, позволяя создавать детерминированные анимации, управляемые через seek(timeMs). Он обеспечивает синхронизацию анимаций с часами HyperFrames, исключая зависимость от системного времени.

Когда применять

  • Создание небольших анимаций DOM и SVG, где синтаксис Anime.js компактен
  • Адаптация существующих примеров Anime.js для работы в режиме, управляемом seek
  • Регистрация нескольких независимых микро-анимаций в едином реестре

Как работает

  1. Создавайте анимации или таймлайны синхронно во время инициализации композиции
  2. Устанавливайте autoplay: false, чтобы Anime.js не управлял временем самостоятельно
  3. Используйте конечные длительности и циклы, вычисляя количество повторов из длительности композиции
  4. Регистрируйте каждый созданный объект анимации или таймлайна в массив window.__hfAnime через push()
  5. Избегайте колбэков, изменяющих DOM на основе системного времени, состояния сети или случайных чисел
  6. Запускайте валидацию командой npx hyperframes validate после редактирования

Примеры запросов агенту

Создай анимацию перемещения элемента .mark с помощью Anime.js для HyperFrames, установив autoplay: false и зарегистрировав её в window.__hfAnime
Настрой таймлайн Anime.js для последовательного появления элементов .title и .accent, используя конечную длительность и регистрацию в window.__hfAnime
Импортируй Anime.js как ES-модуль и создай анимацию для элемента .chip, обеспечив совместимость с seek через window.__hfAnime

Что понадобится

  • Среда HyperFrames с поддержкой runtime adapter для Anime.js
  • Библиотека Anime.js (версии 4.0.2 или совместимой)
  • Доступ к объекту window.__hfAnime для регистрации анимаций

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «animejs» из репозитория: # https://github.com/heygen-com/hyperframes
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r animejs/ ~/.claude/skills/animejs/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.