Back to Details

interactivity-best-practices

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Interactivity Best Practices

交互性最佳实践

Use these guidelines when creating or reviewing Remotion animations, especially if the animation should be editable in Remotion Studio Visual Mode.
在创建或审查 Remotion 动画时使用这些准则，尤其是在动画应可于 Remotion Studio Visual Mode 中编辑时。

Prefer 
interpolate()
over standalone 
spring()

优先使用 
interpolate()
，而非独立的 
spring()

Prefer 
interpolate()
for most animation values.
  • It is easier for humans and agents to reason about.
  • Bezier easings are familiar from CSS and can express snappy or jumpy motion.
  • Studio Visual Mode can edit 
    interpolate()
    keyframes.
When an animation should feel like a spring, keep the editable value in 
interpolate()
and pass 
Easing.spring()
as the easing function.
Prefer:
tsx
style={{
  scale: interpolate(frame, [0, 30], [0, 1], {
    easing: Easing.spring({
      damping: 200,
    }),
  }),
}}
❌ Avoid using 
spring()
as a separate driver when the same motion can be expressed as 
interpolate()
easing:
tsx
const scale = spring({
  frame,
  fps,
  config: {
    damping: 200,
  },
});

style={{
  scale,
}}
Easing.spring()
supports 
damping
, 
mass
, 
stiffness
, and 
overshootClamping
. It is normalized to the interpolation progress, so it does not take 
frame
, 
fps
, 
from
, 
to
, 
delay
, 
reverse
, 
durationInFrames
, or 
durationRestThreshold
.
Use standalone 
spring()
only when the animation specifically needs a frame-driven physical spring simulation that cannot be represented as an easing on 
interpolate()
.
对于大多数动画值，优先使用 
interpolate()
。
  • 它更便于人类和 Agent 理解。
  • Bezier 缓动函数与 CSS 中的写法一致，能够表现灵敏或跳跃的运动。
  • Studio Visual Mode 可以编辑 
    interpolate()
    关键帧。
如果动画需要呈现弹簧效果，请将可编辑值保留在 
interpolate()
中，并把 
Easing.spring()
作为缓动函数传入。
推荐：
tsx
style={{
  scale: interpolate(frame, [0, 30], [0, 1], {
    easing: Easing.spring({
      damping: 200,
    }),
  }),
}}
❌ 当相同的运动效果可以通过 
interpolate()
缓动来表达时，避免将 
spring()
作为单独的驱动函数：
tsx
const scale = spring({
  frame,
  fps,
  config: {
    damping: 200,
  },
});

style={{
  scale,
}}
Easing.spring()
支持 
damping
、
mass
、
stiffness
和 
overshootClamping
。它会对插值进度进行归一化，因此不接受 
frame
、
fps
、
from
、
to
、
delay
、
reverse
、
durationInFrames
或 
durationRestThreshold
。
仅当动画明确需要由帧驱动的物理弹簧模拟，且无法通过 
interpolate()
缓动来表达时，才使用独立的 
spring()
。

Prefer individual CSS transform properties

优先使用单独的 CSS transform 属性

Use individual CSS transform properties such as 
scale
, 
rotate
, and 
translate
instead of composing a 
transform
string.
Prefer:
tsx
style={{
  scale: interpolate(frame, [0, 100], [0, 2]),
}}
❌ Avoid:
tsx
style={{
  transform: `scale(${interpolate(frame, [0, 100], [0, 2])})`,
}}
Individual transform properties are editable in Studio Visual Mode. Values hidden inside a 
transform
string are not.
使用 
scale
、
rotate
和 
translate
等单独的 CSS transform 属性，不要拼接 
transform
字符串。
推荐：
tsx
style={{
  scale: interpolate(frame, [0, 100], [0, 2]),
}}
❌ 避免：
tsx
style={{
  transform: `scale(${interpolate(frame, [0, 100], [0, 2])})`,
}}
单独的 transform 属性可以在 Studio Visual Mode 中编辑，而隐藏在 
transform
字符串中的值无法编辑。

Keep editable values inline

保持可编辑值内联

Put the interpolation directly in the JSX style object when the value should be visually editable.
Prefer:
tsx
style={{
  scale: interpolate(frame, [0, 100], [0, 2]),
}}
❌ Avoid:
tsx
const scale = interpolate(frame, [0, 100], [0, 2]);

style={{
  scale,
}}
Inline computations and literal values let Studio Visual Mode discover and edit the keyframes and props.
This also applies to effect parameters. Keep editable effect values inline in the effect call.
Prefer:
tsx
effects={[
  radialProgressiveBlur({
    center: [0.5, 0.5],
    point1: [0.86, 0.36],
    point2: [0.68, 0.84],
  }),
]}
❌ Avoid hiding editable values behind constants:
tsx
const center = [0.5, 0.5] as const;

effects={[
  radialProgressiveBlur({
    center,
  }),
]}
当某个值应支持可视化编辑时，将插值计算直接放在 JSX style 对象中。
推荐：
tsx
style={{
  scale: interpolate(frame, [0, 100], [0, 2]),
}}
❌ 避免：
tsx
const scale = interpolate(frame, [0, 100], [0, 2]);

style={{
  scale,
}}
内联计算和字面量能让 Studio Visual Mode 发现并编辑关键帧和 props。
这同样适用于 effect 参数。请将可编辑的 effect 值内联放在 effect 调用中。
推荐：
tsx
effects={[
  radialProgressiveBlur({
    center: [0.5, 0.5],
    point1: [0.86, 0.36],
    point2: [0.68, 0.84],
  }),
]}
❌ 避免通过常量隐藏可编辑值：
tsx
const center = [0.5, 0.5] as const;

effects={[
  radialProgressiveBlur({
    center,
  }),
]}

Keep effects unconditional

保持 effects 无条件执行

When using the 
effects
prop, keep the effect array shape unconditional. Studio Visual Mode cannot reliably edit an effect that only exists behind a conditional expression.
Prefer rendering separate elements when one version should have effects and another should not:
tsx
<CanvasImage src={src} width={1280} height={720} />
<CanvasImage
  src={src}
  width={1280}
  height={720}
  effects={[
    blur({
      radius: interpolate(frame, [0, 100], [0, 40]),
    }),
  ]}
/>
❌ Avoid conditionally including an effect:
tsx
<CanvasImage
  src={src}
  width={1280}
  height={720}
  effects={enabled ? [blur({radius: 40})] : []}
/>
Keep editable effect parameters inline inside the unconditional effect call. Do not pass variables for editable values such as coordinates, colors, numeric controls, or interpolations.
使用 
effects
prop 时，保持 effect 数组的结构无条件执行。Studio Visual Mode 无法可靠地编辑仅在条件表达式后存在的 effect。
如果一个版本应有 effect，而另一个版本不应有，请渲染单独的元素：
tsx
<CanvasImage src={src} width={1280} height={720} />
<CanvasImage
  src={src}
  width={1280}
  height={720}
  effects={[
    blur({
      radius: interpolate(frame, [0, 100], [0, 40]),
    }),
  ]}
/>
❌ 避免通过条件判断包含 effect：
tsx
<CanvasImage
  src={src}
  width={1280}
  height={720}
  effects={enabled ? [blur({radius: 40})] : []}
/>
将可编辑的 effect 参数内联放在无条件的 effect 调用中。不要通过变量传入坐标、颜色、数字控件或插值等可编辑值。

Interpolate rotation and translation directly

直接对旋转和位移进行插值

Interpolate CSS unit strings directly for 
rotate
and 
translate
.
Prefer:
tsx
style={{
  rotate: interpolate(frame, [0, 100], ["20deg", "90deg"]),
  translate: interpolate(frame, [0, 100], ["0px 0px", "100px 100px"]),
}}
❌ Avoid manually building strings around separately interpolated numbers when the property can be interpolated directly.
Direct interpolation of these properties is supported and works better with visual editing in Studio.
对于 
rotate
和 
translate
，直接插值 CSS 单位字符串。
推荐：
tsx
style={{
  rotate: interpolate(frame, [0, 100], ["20deg", "90deg"]),
  translate: interpolate(frame, [0, 100], ["0px 0px", "100px 100px"]),
}}
❌ 如果属性可以直接插值，避免围绕分别插值得到的数字手动构建字符串。
这些属性支持直接插值，并且更适合在 Studio 中进行可视化编辑。

Use 
Interactive.*
for tweakable elements

对可调整元素使用 
Interactive.*

Use the 
Interactive
namespace from 
remotion
when an element is likely to be tweaked in Studio.
tsx
import {Interactive} from "remotion";
For example:
tsx
<Interactive.Div
  style={{
    color: "red",
    fontSize: 80,
  }}
>
  Hello
</Interactive.Div>
<Interactive.Div>
, 
<Interactive.Span>
, and the other 
Interactive.*
components behave like their regular HTML equivalents, but enable interactivity in Studio.
Inline styles on these elements, such as text color and font size, can be standardized interactively.
如果某个元素可能需要在 Studio 中进行调整，请使用 
remotion
中的 
Interactive
命名空间。
tsx
import {Interactive} from "remotion";
例如：
tsx
<Interactive.Div
  style={{
    color: "red",
    fontSize: 80,
  }}
>
  Hello
</Interactive.Div>
<Interactive.Div>
、
<Interactive.Span>
及其他 
Interactive.*
组件的行为与常规 HTML 对应元素相同，但能够在 Studio 中启用交互功能。
这些元素的内联样式，例如文本颜色和字体大小，可以通过交互方式统一标准化。