timing

简单的线性插值通过 `interpolate` 函数完成。 ts title="在 100 帧内从 0 变为 1" import {interpolate} from 'remotion'; const opacity = interpolate(frame, [0, 100], [0, 1]); 默认情况下，数值不会被限制（clamp），因此数值可以超出 [0, 1] 的范围。 以下是限制数值的方法： ts title="在 100 帧内从 0 变为 1 并进行外推限制" const opacity = interpolate(frame, [0, 100], [0, 1], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp', }); ## 弹簧动画 (Spring animations) 弹簧动画具有更自然的运动效果。 它们随时间从 0 变为 1。 ts title="在 100 帧内从 0 到 1 的弹簧动画" import {spring, useCurrentFrame, useVideoConfig} from 'remotion'; const frame = useCurrentFrame(); const {fps} = useVideoConfig(); const scale = spring({ frame, fps, }); ### 物理属性 默认配置为：`mass: 1, damping: 10, stiffness: 100`。 这会导致动画在稳定前产生轻微的弹跳。 可以通过以下方式覆盖配置： ts const scale = spring({ frame, fps, config: {damping: 200}, }); 推荐的无弹跳自然运动配置为：`{ damping: 200 }`。 以下是一些常见配置： tsx const smooth = {damping: 200}; // 平滑，无弹跳（微妙的显示效果） const snappy = {damping: 20, stiffness: 200}; // 敏捷，极小弹跳（UI 元素） const bouncy = {damping: 8}; // 弹跳入场（趣味动画） const heavy = {damping: 15, stiffness: 80, mass: 2}; // 厚重，缓慢，小幅弹跳 ### 延迟 动画默认立即开始。 使用 `delay` 参数可将动画延迟指定的帧数。 tsx const entrance = spring({ frame: frame - ENTRANCE_DELAY, fps, delay: 20, }); ### 持续时间 `spring()` 根据物理属性具有自然的持续时间。 要将动画拉伸到特定时长，请使用 `durationInFrames` 参数。 tsx const spring = spring({ frame, fps, durationInFrames: 40, }); ### 结合 spring() 与 interpolate() 将弹簧输出 (0-1) 映射到自定义范围： tsx const springProgress = spring({ frame, fps, }); // 映射到旋转角度 const rotation = interpolate(springProgress, [0, 1], [0, 360]);