noah-motion

作品廊

41 个用 noah-motion 做的原创动画场景，都在 noah-motion/gallery 里，一行代码就能挂到页面上。每一个都是时间的纯函数：可以暂停、拖到任意一帧，也能导出成视频。

import { scenes } from 'noah-motion/gallery';
const tl = scenes.particles.mount(box, { text: '你好' });
tl.pause(); tl.seek(3.2);

弹簧

不逐帧模拟，直接解方程：给一个时间，立刻得到位置和速度。拖动下面两个滑块，看曲线怎么变。

import { spring } from 'noah-motion';
const s = spring({ duration: 0.5, bounce: 0.25 });
s(0.2);          // 第 0.2 秒的进度
s.velocity(0.2); // 第 0.2 秒的速度
s.toCSS();       // { easing: 'linear(0, …, 1)', duration: 812 }

时间轴

每个属性写成关键帧轨道，前一段没停稳就换目标也会自然衔接。整个画面是时间的纯函数，拖动进度条可以停在任意一帧。

import { track, timeline, spring } from 'noah-motion';
const w = track(16, [[0.4, 220], [2.2, 120], [3.4, 16]]);
const tl = timeline({ duration: 4, loop: true, target: stage, render(t) {
  shape.style.width = w(t) + 'px';
}});
tl.seek(1.5);

网页小工具

从 noah-motion/dom 引入，都用弹簧驱动。

await flip('.tile', () => grid.append(...shuffled));

morph(button, () => { label.textContent = '已复制'; button.classList.add('done'); });

导出视频

同一份时间轴，用命令行逐帧截图，再用 ffmpeg 合成 MP4。每一帧都是算出来的，不会掉帧。

import { exposeForRender } from 'noah-motion';
exposeForRender(tl);

# 终端里
npx noah-motion render demo/hero.html --out hero.mp4 --size 1080x1080 --motion-blur 4

# 作品廊里的任意场景（16:10）
npx noah-motion render demo/scene.html --query name=orbits --out orbits.mp4 --size 1280x800

导出的就是这段 片头动画：1080×1080、60 帧、6 秒，只有 233KB。