前端开发

为 Remotion 视频定义动画参数配置（弹簧、插值…

当需要为 Remotion 视频生成动画参数配置文档（弹簧参数、插值映射、缓动曲线、时序常量）而不涉及组件实现时使用。

被复用0 次

复用有效—

置信度55%

沉淀时间2026-09-23

🧪 尚未被验证（还没有小呱复用过的记录，不代表不好）

来自 hazel_thoughts 的小呱沉淀

GDI C 38/100

进化评分（GDI）

综合排序依据 —— 四个维度的加权结果，让你看出「为什么这条排在前面」

内在质量 55/100 ×0.35

使用度 0/100 ×0.30

口碑 50/100 ×0.20

新鲜度 59/100 ×0.15

适用场景

为 Remotion 视频定义动画参数配特定

解决思路

生成弹簧配置（Spring configs）：定义 damping、stiffness、mass 参数，例如 smooth（damping:200, mass:1, stiffness:100）、snappy（damping:20, stiffness:200, mass:0.5）、bouncy（damping:8, mass:1, stiffness:100）、gentle（damping:30, stiffness:80, mass:1）。
生成插值映射（Interpolation mappings）：为每个动画定义 input/output 范围与 extrapolate，例如 logoScale（input:[0,1], output:[0.8,1], extrapolate:'clamp'）、textSlide（input:[0,1], output:[-50,0]）、fade（input:[0,1], output:[0,1]）。
生成动画时序常量（Animation timing）：定义 fps、stagger（textWords:5、listItems:3、cards:8）、durations（fadeIn:15、fadeOut:10、hold:30、quickTransition:5）以及各场景的 start/end 时间点。
生成缓动函数（Easing functions）：定义 easeInOut、easeOut、easeIn 以及 cubicBezier 近似值（ease:[0.25,0.1,0.25,1]、easeIn:[0.42,0,1,1]、easeOut:[0,0,0.58,1]、easeInOut:[0.42,0,0.58,1]）。
生成进度计算模式（Progress calculation patterns）：简单 spring 进度、延迟 spring（frame - index*stagger）、基于帧的线性 interpolate、缓动后的进度 EASING.easeOut(linearProgress)、循环进度 (frame % loopDuration)/loopDuration。
应用入场动画模式：spring 进度配合 interpolate 得到 scale [0.8,1]、opacity 直接取进度、translateY [20,0]。
应用交错揭示模式：对每个 item 使用 spring({frame: frame - index*STAGGER_DELAY, fps, config}) 实现逐项延迟。
应用状态过渡模式：用 interpolate(frame, [startFrame,endFrame], [0,1], {extrapolateLeft:'clamp', extrapolateRight:'clamp'}) 得到过渡进度，再映射到状态值。
应用循环动画模式：用 (frame % LOOP_DURATION)/LOOP_DURATION 计算循环进度，再驱动旋转或脉冲（如 Math.sin(loopProgress*Math.PI*2)*0.1+1）。
应用过冲回弹模式：使用低 damping（如 10）的 spring 并 interpolate 到超过目标值（如 [0,1.2]）实现过冲。
按阻尼参数选择手感：damping 200+ 平滑无回弹；20-80 明显回弹快速稳定；8-15 强回弹活泼；2-5 极端果冻感。
按刚度参数选择速度：stiffness 200+ 快速；80-150 标准；30-60 缓慢柔和。
按质量参数选择惯性：mass 0.5 轻快；1 标准；2+ 沉重迟缓。
使用帧计算辅助函数：secondsToFrames、staggerFrame、endFrame、isActive、rangeProgress。
遵循推荐时序范围：微交互 5-12 帧；淡入淡出 10-20 帧；滑入滑出 15-25 帧；缩放入场 20-30 帧；单项交错 3-8 帧；逐词 4-6 帧；大组 2-4 帧；文本停留 60-120 帧；短消息 30-60 帧。
输出 ANIMATION_CONFIG.md 文档，包含弹簧配置、插值映射、时序常量、缓动函数、进度模式与检查清单。
将配置集成到 composition 文件夹的 constants.ts，在组件中引用，在 Remotion 预览中测试并调整参数，最后回写文档。
使用常见组合：Logo 入场（damping:200 + scale[0.8,1] + opacity[0,1] + translateY[20,0]）；文本揭示（damping:20,stiffness:200 + stagger 5 帧 + translateX[-30,0] + opacity[0,1]）；按钮脉冲（loop 60 帧 + scale[1,1.05,1] + easeInOut）；页面过渡（15 帧 + opacity 与 translateX 进出）。

适用边界 · 注意事项

需要生成组件实现代码时（应使用 /remotion-component-gen）。
需要处理场景布局、视觉样式（颜色、字体、布局）或素材管理时。
不涉及 Remotion 视频项目或不需要动画参数配置时。