onetake 运动库 motion.js 详解：用纯函数时间驱动 DOM 与 Canvas 的一镜到底动效体系

AI 技能音视频媒体生成【免费下载链接】onetakeMotion films that never cut to the next slide: every beat grows out of the one before, one continuous camera, continuity measured by an oracle. A Claude Agent Skill for product launch films and feature demos.项目地址https://gitcode.com/gh_mirrors/on/onetake点击查看免费下载本文围绕 references/motion-library.md 展开系统讲解 onetake 仓库中 lib/motion.js 运动库的设计原则、五大类 moveenter / carry / contact / camera / fluid的完整目录与参数、以及配套的校验与渲染链路。读完你可以掌握如何用「绝对时间的纯函数」写出不依赖任何动画框架的动效、如何在 DOM 与 canvas 之间复用同一组数字以及怎样用 scripts/test_motion.js 与 scripts/probe.py 验证每个 move 的数值与连续性。设计原则Numbers, not styles运动库的核心主张写在文档开头每个 move 都是绝对影片时间的纯函数返回一组普通数值——偏移、缩放、不透明度、圆角、矩阵——由你把这些数字写进 DOM 的transform或 canvas 的调用。它不访问 DOM、无依赖、无构建步骤浏览器里script srcmotion.js得到window.OMNode 里require(./motion.js)直接可用lib/motion.js 末尾通过module.exports导出node scripts/test_motion.js校验本页引用的所有数字。从源码结构看lib/motion.js文件头注释明确了这一契约Numbers in, numbers out. Nothing here touches the DOM or a canvas, so one call drives el.style.transform or ctx.setTransform alike. No state and no Math.random: the same arguments always give the same answer, which is what __seek(t) needs.「同参数必同输出」不是洁癖而是整个 onetake 渲染管线的硬性前提合成页通过window.__seek(t)支持跳转到任意一帧scripts/render.py 与 scripts/probe.py 都靠它逐帧采样。库中唯一的例外是四个 sims 和相机积分它们一次性以 240 Hz 预积分SDT 1 / 240见 lib/motion.js之后按时间采样因此每一帧依然是 t 的纯函数。导出的对象带version: 1.1.0-lite与lineage: otk-7f3e1clib/motion.js全部 API 一览// curves ease.* · bezier · tween · t80 · spring · springVel · ring · settle · spline · rng // enter wordRise · letterDrop · popIn · liftOut · maskRise · typeOn · tick · flyThrough // carry morphRect · iris · zoomThrough · hop · gather · ribbon · seal · staccato // contact impact · impactSplit · press · cursor · squash · sim.{magnet, follow, jelly, verlet} // camera camera · view · dof · whip · shake · drift · lattice · project · unproject · projectBox · screenTravel // fluid swiftSpring · lightField · ripple · silk · carouselLoop先看图再选 movegallery sheet 工作流文档要求「Look before you pick」每个 move 在gallery/sheets/move.png都有一张 sheet上方是六帧画面下排是它在 60 fps 下被追踪元素的速度曲线px/frame与该 move 的 t80。部分 sheet 被多个 move 共用liftOut在 popIn 的 sheet 上、impact在 hop 与 impactSplit 的 sheet 上、cursor在 press 的、sim.*在 sims 的、view和dof在 camera 的。配套的三个入口用途命令/地址实时循环播放某个 movegallery/gallery.html?demomoveplaygallery/gallery.html修改库后重新渲染全部 sheetpython3 scripts/gallery.py或--only ribbon,iris只渲染部分scripts/gallery.py数值自检node scripts/test_motion.jsscripts/test_motion.js从源码看scripts/gallery.py 的 docstring 解释了 sheet 的读法「a tall spike at the start of a move is a snap (low t80), a symmetric hill is a soft S-curve」——开头的高尖峰是 snapt80 低对称的丘是柔和 S 曲线。脚本本身用 Playwright 打开 gallery 页对每个 demo 调用probe.collect_page再复用 scripts/probe.py 的plot_speeds画出速度图。这两个 move 的「血统」同样来自两部被接受的影片文档称之为Two films are the sourcemotion-webcase 1贡献了 entrances 与 live 机制Pocket Weather Clubcase 2贡献了 carries——那些把「被否决的幻灯片」变成「被接受的影片」的 move。fluid 组则是从 cases/ebb-15s 晋升而来2026-09-24 通过验收其参数参照了 David Ch 的 Shipper launch 与 Nazday 的 Elera carousel。应用一个 move绝对时间 双端复用所有时间都是绝对秒数所以时间线就是合成文件顶部的一串数字任意帧可被 seek。文档给出的标准用法const w OM.wordRise(t, 0.15); // DOM el.style.opacity w.op; el.style.transform translateY(${w.y}px) scale(${w.s}); // canvas g.save(); g.globalAlpha w.op; g.translate(x, y w.y); g.scale(w.s, w.s); g.fillText(word, 0, 0); g.restore(); const z OM.zoomThrough(t, 6.3, 7.3, card); // a matrix move: the same numbers either way g.setTransform(...z.matrix); // canvas layer.style.transform matrix(${z.matrix.join(,)}); // DOM, with transform-origin: 0 0注意 matrix 类 move如zoomThrough在两端是同一组六个数canvas 用setTransform(...matrix)DOM 用matrix(...)并设transform-origin: 0 0。仓库里的真实合成模板 templates/comp.html 完整演示了这套契约时间线是顶部常量列表const W1[0.15,0.50,0.92], W1_OUT1.55; const MARK_IN1.65, ...templates/comp.html页面暴露window.__seek(t)resolve 后本帧图片已解码、window.__ready、window.__meta {dur,fps,w,h}另支持?play实时循环与?t6.4hud钉住某帧sims 需要手的轨迹历史所以在__ready里建一次OM.sim.jelly(card, hand)渲染路径上只用.at(t)采样模板中的simulate()templates/comp.html。文档还列出了库自带的工具函数clamp、lerp、seg(t, t0, t1)、sstep/ssstep、spline(knots, t)Hermite 曲线穿过{t, x, y}节点返回[x, y]、以及用于任何「一次性随机」的rng(seed)。它们都定义在 lib/motion.js其中rng是 xorshift32——注释特别强调「for layout jitter decided once in setup, never on the render path」随机数只允许出现在搭建期不能出现在渲染路径上。五组 move 完整目录以下表格完整继承自 references/motion-library.mdfrom列注明血统motion-web / Pocket Weather / 两者 / ebb。enter — 某物到达move返回值说明fromwordRise(t, t0, {zeta, omega, dist, s0, fade}){op, y, s}一个词落地弹簧上升加缩放不透明度领先于弹簧所以读起来绝不是淡入motion-webletterDrop(t, t0, i, {stagger, dist, squash}){op, y, sx, sy}wordmark 字母逐个落下速度把每个字母压扁squash弹簧再把它恢复motion-webpopIn(t, t0, {rise, s0})·liftOut(t, t1, {dur, dist, blur}){op, s, dy}·{op, dy, blur, s}卡片弹簧弹出 · 卡片抬升、略微放大并模糊离场motion-webmaskRise(t, t0, i, {stagger, dist}){y, visible}行从裁剪遮罩后升起就位Pocket WeathertypeOn(t, t0, text, {cps, blink}){n, str, done, caret}恒定速率打字打字时光标常亮motion-webtick(t, tl){on, s}到达该行时勾选框从 0.8 弹出motion-webflyThrough(t, t0, hold, {from, exit, rotY0, blurIn}){visible, x, rotY, rotX, s, op, blur}一个屏幕倾斜地飞入、停留、飞出CSS 3Dmotion-web实现细节举例wordRise的不透明度是clamp(k * fade, 0, 1)fade 默认 1.5让透明度比弹簧进度更快地到 1这正是「opacity leads the spring」的落地lib/motion.js。letterDrop则用数值微分dk (spring(tau) − spring(tau − h)) / h得到速度sq clamp(|dk| * squash, 0, max)——下落越快压扁越狠落地后自然恢复lib/motion.js。flyThrough返回的blur是进出场两段模糊的取大值供 CSSfilter: blur()使用lib/motion.js。carry — 下一个节拍从这个节拍里长出来这一组是 onetake「一镜到底」的核心在 scripts/probe.py 的术语里一个边界被称为carried当且仅当有东西存活跨越它并且可见地移动或缩放进了下一个节拍。probe 的判定规则scripts/probe.py存活元素的中心位移 ≥ 2% 对角线、或对数尺寸差 ≥ 0.1即计为强载体若唯一的存活物是大面积不变的内容如整页换内容的窗口框架只能算anchored得分减半什么都没有则bare。连续分score (carried anchored/2) / 计入的边界数另有豁免硬切连发1.5 秒内 ≥3 刀即 staccato 语境、最后 1.2 秒的结束卡、以及window.__meta.cuts声明的时间点。move返回值说明适用场景morphRect(t, t0, t1, A, B, {curve}){x, y, w, h, r, cx, cy}容器变换一个矩形变成另一个矩形被按下的东西变成结果按钮 → 窗口卡片 → 页面iris(t, t0, t1, cx, cy){r, covered}圆从某点打开直到盖住整帧主体打开自己的世界Pocket Weather 6.95 szoomThrough(t, t0, t1, target, {curve, fit}){s, tx, ty, matrix}对数空间推进直到目标充满画面众多卡片中的一张就是下一个场景hop(t, t0, t1, from, to, {height}){x, y}从一槽位到下一槽位的弧线落地配impact主体选择下一个东西Pocket Weather 1.8 sgather(t, t0, t1, i, n, from, to, {stagger, arc, spin}){x, y, rot}角色群沿扇形弧线汇入一个簇多物归为一组10.05 sribbon(t, switches, {amp, lag}){shift, index, wobble, rot, sx, sy, textDx}弹性轨道面板切换带 ring-out文字滞后跟随选项在手下变化8.05、8.95 sseal(t, t0, t1, {r, turns}){r, rot}一个旋转的圆盘在折叠的角色群下生长角色群变成品牌标11.5 sstaccato(t, list){word, i}硬切词一串重音爆发——整个片里唯一允许纯硬切的地方文档补充作用于单一连续世界上的cameramove见下同样构成 carry——它的边界上「一切存活」。几个关键实现值得展开zoomThrough的对数空间缩放s Math.exp(Math.log(sEnd) * k)让推近「读起来是一个恒定速度」而非线性插值那种先慢后快的失速感lib/motion.js。fit: cover时目标恰好铺满画面contain时留边。scripts/test_motion.js 验证了 k1 时目标四角恰好映射到(0,0)–(1920,1080)、k0 时为单位矩阵。iris的半径取到最远角far max(hypot 到四个角) 2保证covered: k 1时真的一帧不漏lib/motion.js测试同样断言「iris covers the farthest corner at k 1」。ribbon是少数带内部循环的 moveshift对每个切换时刻累加curve(seg(t, ts, ts dur))r累加ring(t - ts)由此同时驱动位移、wobble、倾斜、拉伸与textDx -r * amp * lag的文字滞后lib/motion.js。测试断言 t5 时「settles on the last panel」shift 2且 wobble 收敛到 0。gather按索引扇开o i − (n−1)/2rot bump * o * spin中间项不转、两端转得最多。contact — 一个东西引起另一个move返回值说明fromimpact(t, tHit, {decay, omega, sqx, sqy}){r, sx, sy}落地命中瞬间压扁随后 ring out两者皆有impactSplit(t, tHit, x, cx, {width, spread, bounce}){dx, dy, rot}字形按与命中点的距离被推开、回弹、重新合拢Pocket Weatherpress(t, tc, {depth, flash}){s, sq, down, active}一次点击下陷、ring、状态翻转motion-webcursor(t, knots, clicks){x, y, s}指针走在手的样条上每次点击时缩小motion-websquash(vx, vy, {k, max}){ang, sx, sy}沿速度方向拉伸、垂直方向变薄motion-websim.magnet·follow·jelly·verlet(card, hand, opts){at(t), …}磁吸按钮、弹簧跟随、果冻环、Verlet 绳——以 240 Hz 预积分motion-web四个 sim 是库中仅有的「积分型」成员源码细节lib/motion.js统一以SDT 1/240步进从card.t积分到card.out 0.3结果存入Float32Array状态序列at(t)通过sampler按帧索引取整值——st[clamp(floor((t − t0)/per), 0, len−1)]保证采样无随机性magnet手进入半径 R 时按pull * (1 − (d/R)²)产生吸引再经弹簧-阻尼积分B是按钮中心460×270 卡片坐标系jelly48 个径向弹簧 邻域耦合拉普拉斯项CP1800手在reach内按压产生dent每 4 步存一帧等效 60 Hz 采样verlet16 节点悬挂链位置 Verlet 每步 3 次迭代约束同样隔 4 步存帧。scripts/test_motion.js 对四个 sim 各做两次独立构建并断言at(0.73)的 JSON 完全一致——确定性是验收项不是口头承诺。模板 templates/comp.html 展示了它们如何与press、squash组合magnet 卡片用OM.press(t, CLICKS[1])的sq做按压形变follow 卡片用OM.squash(vx, vy)at(t)返回含速度做速度拉伸。camera — 一台被操作的相机move返回值说明camera(t, keys){x, y, zoom, rot}关键帧相机{t, x, y, zoom, rot, curve}zoom 在对数空间插值view(cam, {depth})[a, b, c, d, e, f]深度为depth的图层的矩阵0 焦点面正 更远负 更近一台相机的视差dof(depth, focus, {k, max})px按离焦平面距离产生的模糊whip(t, t0, dur, dist){k, d}甩镜头shake(t, tHit, {amp, decay, freq, seed}){x, y, rot}衰减的、确定性的、命中前严格为零drift(t, t0, t1, amount)scale停留镜头的缓慢推近1 → 1 amount —— verify 的 rest 段会计入运动所以别放在 rest 上lattice(cam, {depth, spacing, px}){matrix, r, spacing, x0, x1, y0, y1}OD · 透过cam看到的远网格的可见点屏幕上点半径恒为px——给 move 一个可以滑过的背景project(M, x, y)·unproject(M, x, y)·projectBox(M, box)[x, y]· box经view()矩阵做世界 ↔ 屏幕换算__track报屏上盒screenTravel(c0, c1, cMid)px两台相机之间画面四角移动的距离——__motion中相机的那一份视差矩阵的构造lib/motion.js值得细读深度经f 1 / (1 max(−0.9, depth))衰减——depth 1 的图层f 0.5正好「走得慢一半」这正是 scripts/test_motion.js 断言的三条相机性质居中相机是单位矩阵、view()把相机注视点送到画面中心、depth 1 图层移动距离减半。screenTravel则取屏幕四角用中间相机cMid反投影回世界点再分别用c0、c1投影取四角位移最大者——scripts/render.py 用它计算每帧快门应展开多大。文档中「A keyed camera that feels operated」一节记录了 one-dot 片的两次迭代静态版缺「灵动的跟踪运镜」改成跟随每个节拍主体的关键帧相机后得到「运镜、镜头和物理都没问题」。具体手法在sineInOut上提前约 0.1 s 给主体打关键帧追随、在expoInOut上给落点提前打关键帧甩过去、叠加「手」——一段慢速双正弦漂浮、在停留段归零——以及每次落地的shake见 references/composition.md 的A camera一节。ebb 与 onetake launch film 都是这样做的。两条硬约束空背景上跑相机读不出来——在后方depth 1.2画一层lattice。lattice通过r px / hypot(M[0], M[1])保证点在任何缩放下屏幕尺寸恒定并用四角反投影算出需要铺画的世界范围lib/motion.jsone-dot 片用的是 48 间距、depth 1.2、1.4 px 的点。相机的行程叠加在元素自身行程之上one-dot 相机切点处峰值达935 px/frame 30 fps。fluid — 光的地面、丝绸与传送带ebb这一组由 cases/ebb-15s 晋升而来2026-09-24 通过验收参数参照 David Ch 的 Shipper launch 与 Nazday 的 Elera carousel。ebb 的合成页就是工作示例光场即时间洪水以圆环形式退进下一个场景丝绸填满每张卡片传送带用自己的时钟减速。move返回值说明适用场景swiftSpring(tau, kind, {duration, bounce})numberSwiftUI 的Spring(duration d, bounce b) ζ 1 − b、ω 2π/d 的OM.spring.smoothb 0、.snappy.15、.bouncy.3让 UI 有原生Apple的手感而非「动画感」lightField(level, {rest, top, r0, r1}){cx, cy, rx, ry, tilt, horizon, core, stops}锚定在画面下方的持续辉光level 0 为静止horizon 0.84 H1 为淹没。用径向渐变按stops填充椭圆core半半径处是文字可转白的位置。Flood ≤ 0.4 sdrain ~1 s让地面本身成为标点它升起、淹没退水时下一场景浮现ripple(t, t0, {n, stagger, dur, rMax}){r: [radii], done}n 个圆环以stagger间隔离开同一点在 r[0] 之外填充洪水环间交替两种色调最内环里透出世界洪水必须在不使用擦除的情况下结束于新场景silk(tau, seed, stops, {gx, gy, contrast, out})·silk.ramps·silk.rampRGBAgx × gy域扭曲噪声两个 octave16×20 网格对比 ×3.4putImageData后放大绘制配 blur520 宽时 28 px与一缕浅色 screen 光雾。ember/peach/dusk三条 ramp 用「两亮之间一道暗褶」表现布料让卡片、壁纸、锁屏在没有内容时也是活的carouselLoop({dur, start, speed, rampDur, stop}){at(t) → {x, tau}}传送带.smooth起步后匀速一次积分完成tau是随它一起减速的时钟——用它驱动每张卡片自己的循环多物品流过并一同停住Elera0.106 W/s源码层面有三个可验证的细节silk是确定性哈希值噪声silkHash用Math.imul整型运算 双 octavesilkFbm域扭曲测试断言 16×20 RGBA、同参数逐位一致、tau变化时画面漂移且emberramp 在 0.42 处确实存在比 0.22/0.74 更暗的明度折scripts/test_motion.jslightField(1)的洪水椭圆会越出画面顶部且宽度超 1920scripts/test_motion.jscarouselLoop的tau是逐帧累加的减速时钟测试断言「start 前静止、巡航段 ~speed、stop 后 x 与 tau 都不再变」scripts/test_motion.js。曲线与弹簧库的数学地基所有 move 共享同一套曲线工具定义与注释在 lib/motion.js。理解t80是理解整库的钥匙它定义为「覆盖 80% 路程之前耗费的时长占比」——低 t80 先 snap 后 settlelaunch-clip 手感~0.7 对称 S 曲线柔和用于位移时会读作 web 过渡。scripts/probe.py 对整部影片按同样口径统计每个 move 的 t80并把t80 0.55的路程占比报为soft share。scripts/test_motion.js 锁定的 t80 表4000 步数值求根曲线t80曲线t80linear0.80quartOut0.33smoothsmoothstep0.713quintOut0.275smoothersmootherstepPW 的位移曲线0.674expoOut0.232quadOut0.553cubicOut0.415弹簧族是第二块地基spring(tau, zeta, omega)是 0→1 的阻尼弹簧阶跃响应分欠阻尼ζ1过冲0.4 弹性…0.8 扎实、临界ζ1、过阻尼三分支实现lib/motion.js。围绕它还有四个配套springVelspring的时间导数注释直言用途是squash-from-velocity测试用中心差分验证导数一致误差 1e-3ring(tau, decay, omega)围绕 0 的衰减振荡点击、落地、wobble 共用它impact/press/ribbon的 ring-out 都是它settle(zeta, omega, eps)弹簧保持在 1 ± eps 内所需秒数——用来规划一个节拍要停多久测试断言 ζ 0.6 / ω 22 时结果在 0.1–1 s 区间bezier(x1,y1,x2,y2)CSS cubic-bezier 的求值器牛顿迭代 二分回退供直接引用设计规范或参考片的曲线测试与 20 万点暴力搜索对比最大误差 2e-4。spring()还与合成模板原始spr()做了逐位相等断言-0.1…3 s、步长 0.0137保证库升级不改变既有影片。速度与快门决定动效需要多少 motion blur文档的Speed and the shutter一节给出在 gallery 中 60 fps 下测得的峰值速度表——峰值速度决定一个 move 是否需要运动模糊排名move峰值 px/frame 60fps1whip5402iris2063flyThrough1894morphRect1565ribbon1186shake1157follow sim1028zoomThrough72所有 entrance 与其他 carry 都在 50 以下。文档的关键推论30 fps 下每个数字翻倍于是草稿阶段大多数 carry 会越过 verify 的 80 px/frame 阈值。而liftOut/flyThrough返回的blur是营造纵深感的 CSS filter不能替代快门。渲染端由 scripts/render.py 落实它模拟胶片相机在快门张开期间积分曝光默认--shutter 180°在帧时间两侧取多个子帧曝光并在线性光域求平均先拍快门两端若两曝光相同则本帧无运动、直接跳过。固定采样数会让快速 move 出现频闪因此页面可定义window.__motion(t0, t1)回报快门期间移动的最大距离render 按--gap 24 px自适应决定每帧曝光数。--shutter 0关闭模糊用于对比。也就是说「速度数字 → 快门采样数」是一条从screenTravel到最终成片的可审计链路。校验闭环test_motion.js 与 probe.py运动库的验收分两层单元级node scripts/test_motion.js覆盖端点所有 ease 满足 f(0)0、f(1)1、t80 表、bezier 对暴力求解、弹簧对导数与 ζ1 连续性、carry 几何iris 覆盖、zoomThrough 铺满、view 居中与视差、sim 确定性、project ∘ unproject互逆、静止相机的screenTravel为 010 px pan zoom 2 应得 20 px以及全 move 在 t −1…4 s 扫掠下所有输出均为有限数scripts/test_motion.js。影片级python3 scripts/probe.py comp.html --fps 30 --out probe/无需任何标注即可读取页面——自动追踪 DOM 的 img/video/canvas/文本/绘制盒以及 canvas 的每次 draw/fill/stroke钩子装在页面脚本之前若页面定义了window.__track(t)则改读注记。输出 continuity 分数、每个 move 的 t80/峰值/过冲、以及__meta.inFrame声明元素的出框时刻。gallery/gallery.html 中的每个 demo 同样遵守__seek / __track / __meta契约gallery/gallery.html这就是 sheet 能自动重渲、速度曲线能自动标注 t80 的原因。动手路径从模板到你的合成把 templates/comp.html 作为起点是最短路径它的注释规定了编辑顺序与库的使用纪律EDIT HERE (in order): 1 INFO/FR after record_footage.py · 2 beats · 3 copy · 4 the HAND knots so the pointer causes what the footage shows · 5 nothing else until stills.py looks right. The moves are OM.* from motion.js — call them, do not re-derive springs inline.即调用OM.*不要在合成里重新推导弹簧手的节点HAND knots要用同一条样条喂给指针与所有 sim因果关系才一致__seek是纯函数的渲染入口__ready里做一次性搭建测量文字宽度、simulate()预积分 sims。配合本文的目录选 move、看 sheet 定曲线、跑test_motion.js保数值、用probe.py看 carry 分数、用render.py的快门成片——这就是 onetake「continuity measured by an oracle」的完整工作流。赞分享AI 技能音视频媒体生成【免费下载链接】onetakeMotion films that never cut to the next slide: every beat grows out of the one before, one continuous camera, continuity measured by an oracle. A Claude Agent Skill for product launch films and feature demos.项目地址https://gitcode.com/gh_mirrors/on/onetake点击查看免费下载相关推荐onetake skill-demo如何用纯 DOM 与 OM 动效库做一条 15 秒操作演示片onetake skill demo如何用纯 DOM 与 OM 动效库做一条 15 秒操作演示片 本文以 cases/skill demo 15s/READMAI 技能音视频媒体生成onetake 案例解析15 秒「ebb」一镜到底如何用一束光接住五个场景 —— 节拍表、Keyed Camera 与流体动效集onetake 案例解析15 秒「ebb」一镜到底如何用一束光接住五个场景 —— 节拍表、Keyed Camera 与流体动效集 本文以 onetake 技能AI 技能音视频媒体生成onetake:把产品发布动效片写成一镜到底的工程协议——Claude Agent Skill 的 SKILL.md 全解onetake:把产品发布动效片写成一镜到底的工程协议——Claude Agent Skill 的 SKILL.md 全解 onetake 是一个 ClauAI 技能音视频媒体生成上一篇终极指南如何训练自定义waifu2x-caffe模型打造专属图像增强工具下一篇PHP Font Lib 开发者手册扩展自定义字体格式支持创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考