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可视化模式下可编辑时。

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更容易理解其逻辑。
贝塞尔缓动在CSS中很常见，可以表达活泼或跳跃的运动效果。
Studio可视化模式可编辑
```
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变换属性

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

字符串。

推荐写法：

tsx

style={{
  scale: interpolate(frame, [0, 100], [0, 2]),
}}

❌ 避免写法：

tsx

style={{
  transform: `scale(${interpolate(frame, [0, 100], [0, 2])})`,
}}

独立的变换属性可在Studio可视化模式下编辑。隐藏在

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样式对象中。

推荐写法：

tsx

style={{
  scale: interpolate(frame, [0, 100], [0, 2]),
}}

❌ 避免写法：

tsx

const scale = interpolate(frame, [0, 100], [0, 2]);

style={{
  scale,
}}

内联计算和字面量值能让Studio可视化模式发现并编辑关键帧和属性。

这也适用于特效参数。将可编辑的特效值内联在特效调用中。

推荐写法：

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

保持特效无条件存在

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

属性时，保持特效数组的结构无条件。Studio可视化模式无法可靠编辑仅在条件表达式下存在的特效。

当一个版本需要特效而另一个不需要时，优先渲染单独的元素：

tsx

<CanvasImage src={src} width={1280} height={720} />
<CanvasImage
  src={src}
  width={1280}
  height={720}
  effects={[
    blur({
      radius: interpolate(frame, [0, 100], [0, 40]),
    }),
  ]}
/>

❌ 避免条件性添加特效：

tsx

<CanvasImage
  src={src}
  width={1280}
  height={720}
  effects={enabled ? [blur({radius: 40})] : []}
/>

将可编辑的特效参数内联在无条件的特效调用中。不要将坐标、颜色、数值控件或插值等可编辑值作为变量传递。

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中启用了交互性。

这些元素的内联样式（如文本颜色和字体大小）可通过交互方式进行标准化调整。

interactivity-best-practices

Original

Translation

Interactivity Best Practices

交互性最佳实践

Prefer
`interpolate()`
over standalone
`spring()`

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

Prefer individual CSS transform properties

优先使用独立的CSS变换属性

Keep editable values inline

将可编辑值内联

Keep effects unconditional

保持特效无条件存在

Interpolate rotation and translation directly

直接插值旋转和平移

Use
`Interactive.*`
for tweakable elements

使用
`Interactive.*`
组件实现可调整元素

interactivity-best-practices

Original

Translation

Interactivity Best Practices

交互性最佳实践

Prefer interpolate() over standalone spring()

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

Prefer individual CSS transform properties

优先使用独立的CSS变换属性

Keep editable values inline

将可编辑值内联

Keep effects unconditional

保持特效无条件存在

Interpolate rotation and translation directly

直接插值旋转和平移

Use Interactive.* for tweakable elements

使用Interactive.*组件实现可调整元素

Prefer
`interpolate()`
over standalone
`spring()`

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

Use
`Interactive.*`
for tweakable elements

使用
`Interactive.*`
组件实现可调整元素