SuperAPI AI 工具集

motion-quality

测试与质量

查看项目

更新于 10-16 01:13

技能介绍

motion-quality 是 snapcn 仓库中面向文字动画与 registry 组件发布的实测规则集。核心主张:不能靠肉眼判断亚像素问题,必须渲染帧并测量。其测量库 lib/motion-check 提供 settleFrame、holdIsStill、centroidMonotonic、shapeInvariant、noFrozenFrames、edgeBleedDelta、detailCoverage 等检查;capture.ts 将组件帧渲染到内存,输出 PNG 缓冲而非 mp4,因为 h264 会量化掉用于恢复 alpha 的抗锯齿信息。用法示例:pnpm run motion:measure --only=text-build 输出 registry/measured.json。

缩放文字的两个主要问题:一是字形原点纵向被取整到整设备像素,导致基线整像素跳动,修复办法是以基线为缩放原点,代码中用空的内联元素测得 baseline,transformOrigin 设为 0% ${baseline}px;实测显示基线处纵向抖动 0.014px、方向反转 0 次。二是 hinting 使字形轮廓逐帧变化(沸腾),修复为 text-rendering: geometricPrecision,实测形状漂移从 3.41% 降到 0.22%,并强制开启亚像素字形定位。

will-change: transform 在 Player 中合适、在渲染中不合适,需按 getRemotionEnvironment().isRendering 进行条件启用。缓动方面,quint-out、expo-out 在帧时钟下会连续多帧移动小于 0.5px 而看似冻结,建议采用 cubic-bezier(0.2, 0.6, 0.35, 1) 等适度减速曲线,并用小于 0.5px 的检查逐帧验证。文中还列出不应视为修复的做法:translateZ(0)、translate3d、backface-visibility、perspective、rotateY、blur(0)、字体平滑等。

布局注意:inline-block 末尾空格会被剥离;offsetTop 取整,需亚像素时用 getBoundingClientRect();测量应放在 delayRender() 之后并在重新渲染后 continueRender()。Player 是实时 rAF 重渲染而非视频,慢速平滑运动下预览可能失真,需加入 RENDERED_DEMOS 播放真实 mp4,并运行 pnpm run render:previews --only <slug>。渲染无全局 CSS 而站点有,例如 Tailwind preflight 的 img、video { max-width: 100% } 会使图片塌缩,应自行设置 max-width: none 与 width: max-content 并在站点验证几何。透视缩放需提前打开“覆盖屏幕”闸门,标志物无法靠放大填满整帧。仓库注意事项:不要格式化 registry/snap-cn/registry.json;registry:build 会重写所有 public/r/*.json;demo 通过 lib/demo-manifest.json 哈希加 ?v=<hash> 避免缓存过期。