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]);