mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-11 23:00:03 +00:00
feat(core): add anime.js runtime adapter (#569)
## Summary - Adds a `RuntimeDeterministicAdapter` for anime.js v4+ alongside existing Lottie, Three.js, WAAPI, and CSS adapters - Enables frame-accurate rendering of anime.js animations — the adapter converts seek time (seconds) to milliseconds and calls `.seek(timeMs)` on registered instances - Auto-discovers running instances via `anime.running`; compositions can also register manually via `window.__hfAnime` ## Usage in compositions ```html <script src="https://cdn.jsdelivr.net/npm/animejs@4.0.2/lib/anime.iife.min.js"></script> <script> const anim = anime({ targets: '.box', translateX: 250, rotate: '1turn', duration: 2000, autoplay: false, }); window.__hfAnime = window.__hfAnime || []; window.__hfAnime.push(anim); </script> ``` ## Files changed - `packages/core/src/runtime/adapters/animejs.ts` — adapter implementation - `packages/core/src/runtime/adapters/animejs.test.ts` — 15 unit tests - `packages/core/src/runtime/init.ts` — register adapter in runtime init - `packages/core/src/runtime/window.d.ts` — add `anime` and `__hfAnime` globals ## Test plan - [x] All 15 unit tests pass (`bun run --cwd packages/core test -- --run adapters/animejs`) - [x] Build passes (`bun run build`) - [x] Pre-commit hooks pass (lint, format, typecheck, commitlint) - [x] Manual test: render a composition using anime.js animations
This commit is contained in:
+18
@@ -43,6 +43,24 @@ declare global {
|
||||
};
|
||||
};
|
||||
THREE?: ThreeLike;
|
||||
/**
|
||||
* Global anime.js instance (set by including the anime.iife.min.js script).
|
||||
* The adapter uses `anime.running` for auto-discovery.
|
||||
*/
|
||||
anime?: {
|
||||
(params: unknown): unknown;
|
||||
timeline?: (params?: unknown) => unknown;
|
||||
running: unknown[];
|
||||
};
|
||||
/**
|
||||
* anime.js instances registered by compositions.
|
||||
* The adapter seeks all instances when the player is seeked.
|
||||
*
|
||||
* Push your animation or timeline instance here:
|
||||
* window.__hfAnime = window.__hfAnime || [];
|
||||
* window.__hfAnime.push(anim);
|
||||
*/
|
||||
__hfAnime?: unknown[];
|
||||
/**
|
||||
* Global lottie-web instance (set by including the lottie.min.js script).
|
||||
* The adapter uses `lottie.getRegisteredAnimations()` for auto-discovery.
|
||||
|
||||
Reference in New Issue
Block a user