39 lines
5.3 KiB
Markdown
39 lines
5.3 KiB
Markdown
# Anime.js element registry
|
||
|
||
Bounded primitives for meaningful diagram motion. These are the three element records in [the executable configuration](../assets/animejs/examples.js), not a general-purpose animation catalog.
|
||
|
||
| Recipe ID | Use / avoid | Configurable fields and geometry |
|
||
| --- | --- | --- |
|
||
| `svg-draw` | Use to reveal a connection in sequence. Avoid presenting drawing speed as measured latency, or tracing decorative outlines with no explanatory purpose. | `duration`, SVG `path`, `start`, `end`, `title`, `description`. Renderer uses `svg.createDrawable` with `draw: ['0 0','0 1']`; muted guide stays visible. Final trace is fully drawn. |
|
||
| `motion-path` | Use when travel communicates direction. Avoid ambient infinite particles or claiming the fixed duration represents real throughput. | `duration`, `path`, `start`, `end`, `title`, `description`. `svg.createMotionPath` moves an origin-centered marker in the route's SVG coordinate system. Final packet stays at the endpoint. |
|
||
| `spatial-stagger` | Use for activation spreading from a spatial origin. Avoid arbitrary stagger on prose lists or grids whose ordering means nothing. | Positive integer `columns`, `rows`, nonnegative `delay`, positive `duration`, `title`, `description`. Row-major cells and `[columns, rows]` grid are created together. Center-origin stagger changes opacity from .25 to 1. Keep dimensions modest and retest spacing; the shipped grid is 5×3. |
|
||
|
||
For multi-stage examples see [composition registry](registry-animejs-compositions.md).
|
||
|
||
## Editable source and offline use
|
||
|
||
- [Example configurations](../assets/animejs/examples.js): titles, descriptions and recipe parameters.
|
||
- [Renderer and lifecycle](../assets/animejs/gallery.js): SVG geometry and Anime v4 timelines; branches select by stable recipe `id`.
|
||
- [Styles](../assets/animejs/gallery.css) and [source entry](../assets/animejs/index.html). Open the source entry with its sibling files intact, or build the portable release:
|
||
|
||
```sh
|
||
python3 scripts/build-gallery.py
|
||
CHROMIUM_EXECUTABLE=/path/to/chrome node scripts/test-gallery.mjs
|
||
```
|
||
|
||
The dependency-free Python builder embeds the shared pinned Anime **4.5.0** UMD, CSS, configuration, runtime and Anime license into `dist/animejs-gallery-0.4.0.html`. It emits `dist/animejs-gallery-manifest.json` with artifact and input SHA-256 hashes. No CDN, external fonts, runtime fetches, bundler or Reveal dependency. Tests use the repository's existing Playwright dependency.
|
||
|
||
For reuse, load vendor → configurations → runtime with a `<main>` present, or extract `mount(host, config)` and the relevant recipe branch into your owner. The published `animeGallery.mount` returns `play()`, `replay()`, `seek(milliseconds)`, `settle()`, `state()`, `destroy()`. Keep recipe IDs unchanged when tuning configuration. `kind` is catalog metadata, not a renderer selector. Timing is in milliseconds; use positive finite durations, valid SVG paths inside the 400×220 viewBox, and short labels. This is an editable reference, not an untrusted-config validator.
|
||
|
||
## Lifecycle and accessibility contract
|
||
|
||
Each mount owns one finite, initially paused timeline; scenes start complete. Play resumes a paused seek or restarts a completed scene. Replay starts at zero. Seek pauses and clamps finite input to the timeline; non-finite input maps to zero. Settle pauses at the final frame. Repeated replay does not create instances. Before print, page hide, hidden document and live motion-preference changes settle the scene. When embedding in slides, additionally call `settle()` on slide departure; the standalone gallery has no slide-navigation listener. Destroy settles, aborts owned listeners, reverts the timeline and clears its host; repeated destroy is safe. Destroy before remounting the same host.
|
||
|
||
Reduced motion forces the readable final state for play, replay and seek. Native buttons support Enter/Space; the labeled range supports keyboard seeking. A polite status output announces playing/paused/complete without frame-by-frame announcements. Essential explanations remain static. Static SVG parts are not fake buttons. Use the source's system font and high-contrast palette or retest your replacement.
|
||
|
||
## Provenance and verified coverage
|
||
|
||
All five recipes and gallery code are original examples written for this package, not copied from showcase or peer source. Anime.js itself remains the existing vendored dependency, with its license embedded by the builder; see [vendor license](../assets/vendor/anime-LICENSE.md). No third-party artwork or remote assets.
|
||
|
||
[Browser test](../scripts/test-gallery.mjs) exercises all five recipes in normal and reduced-motion offline Chromium contexts: positive finite durations; normal-motion deterministic backward/forward seeking and clamping; real Enter/Space play/replay, range-key seeking, pointer settle; actual intermediate playback; natural completion; final SVG node visibility/bounds; live reduced-motion and print settlement; destroy/remount; no network attempts or console/page errors. Reduced motion tests assert final-state seek suppression rather than animated intermediate frames. Outputs: `evidence/animejs-gallery-test-report.json` and full-page normal/reduced screenshots. The report binds results to the built HTML hash. This does not establish cross-browser, screen-reader, production-slide-navigation or PDF-export acceptance. Test changed configurations and inspect their intermediate frames before adopting them.
|