SuperAPI AI 工具集

spring-animation

设计与创作

查看项目

更新于 10-16 07:23

技能介绍

用途:在 Remotion 视频合成中实现弹簧物理动画,提供带弹跳、过冲和弹性收敛的自然运动。资料说明 @react-spring/web 与 Remotion 不兼容(其内部使用 requestAnimationFrame),因此本技能改用 Remotion 原生 spring(),以帧确定的方式提供同类物理模型。

主要能力:spring() 返回 0 到 1 的值(低阻尼时可超过 1),配置参数含 damping(默认 10,越低越弹)、stiffness(默认 100,越高越快)、mass(默认 1,越大惯性越强)、overshootClamping,以及 delay、durationInFrames、reverse、from、to 选项。measureSpring() 可计算某配置收敛所需帧数,用于序列与时长规划。内置预设包括 smooth、snappy、bouncy、heavy、wobbly、stiff、gentle、molasses、pop、rubber。

使用方式:通过 import { spring, useCurrentFrame, useVideoConfig } from 'remotion' 取帧与 fps,再以 spring({ frame, fps, config }) 驱动样式;可组合出弹簧入场、缩放弹出、进出场、交错轨迹、字符/词/网格错峰、序列链 useSpringChain、多属性不同物理配置及弹簧计数器等模式。

适用场景:标题图标弹入、按钮与 UI 元素、注意力引导、数字过冲后收敛、带重量感的位移旋转、多属性编排。

限制:需要线性/缓动且无回弹、精确帧定时、clip-path、进度条或确定性计数器时,应使用 Remotion 原生 interpolate();文本拆分、SVG 描边/形变、复杂时间轴与 ScrambleText 等应改用 GSAP。收费、价格、平台与效果类信息暂未提供。