react-spring

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Spring Animation Principles

React Spring 动画原则

Implement all 12 Disney animation principles using React Spring's spring physics system.

使用React Spring的弹簧物理系统实现迪士尼全部12条动画原则。

1. Squash and Stretch

1. 挤压与拉伸

jsx

const [springs, api] = useSpring(() => ({
  scaleX: 1,
  scaleY: 1,
  config: { tension: 300, friction: 10 }
}));

api.start({ scaleX: 1.2, scaleY: 0.8 });
<animated.div style={springs} />

jsx

const [springs, api] = useSpring(() => ({
  scaleX: 1,
  scaleY: 1,
  config: { tension: 300, friction: 10 }
}));

api.start({ scaleX: 1.2, scaleY: 0.8 });
<animated.div style={springs} />

2. Anticipation

2. 预备动作

jsx

const [props, api] = useSpring(() => ({ y: 0, scaleY: 1 }));

const jump = async () => {
  await api.start({ y: 10, scaleY: 0.9 }); // wind up
  api.start({ y: -200, config: { tension: 200 } }); // action
};

jsx

const [props, api] = useSpring(() => ({ y: 0, scaleY: 1 }));

const jump = async () => {
  await api.start({ y: 10, scaleY: 0.9 }); // 蓄力准备
  api.start({ y: -200, config: { tension: 200 } }); // 执行动作
};

3. Staging

3. 布局呈现

jsx

const bgSpring = useSpring({ filter: 'blur(3px)', opacity: 0.6 });
const heroSpring = useSpring({ scale: 1.1, zIndex: 10 });

jsx

const bgSpring = useSpring({ filter: 'blur(3px)', opacity: 0.6 });
const heroSpring = useSpring({ scale: 1.1, zIndex: 10 });

4. Straight Ahead / Pose to Pose

4. 逐帧动画/关键帧动画

jsx

const [props] = useSpring(() => ({
  from: { x: 0, y: 0 },
  to: [
    { x: 100, y: -50 },
    { x: 200, y: 0 },
    { x: 300, y: -30 }
  ]
}));

jsx

const [props] = useSpring(() => ({
  from: { x: 0, y: 0 },
  to: [
    { x: 100, y: -50 },
    { x: 200, y: 0 },
    { x: 300, y: -30 }
  ]
}));

5. Follow Through and Overlapping Action

5. 跟随动作与重叠动作

jsx

const bodySpring = useSpring({ x: 200 });
const hairSpring = useSpring({ x: 200, delay: 50 });
const capeSpring = useSpring({ x: 200, delay: 100, config: { friction: 15 } });

jsx

const bodySpring = useSpring({ x: 200 });
const hairSpring = useSpring({ x: 200, delay: 50 });
const capeSpring = useSpring({ x: 200, delay: 100, config: { friction: 15 } });

6. Slow In and Slow Out

6. 缓入缓出

jsx

const spring = useSpring({
  x: 300,
  config: {
    tension: 170,
    friction: 26 // balanced = smooth in/out
  }
});
// High tension + low friction = fast
// Low tension + high friction = slow

jsx

const spring = useSpring({
  x: 300,
  config: {
    tension: 170,
    friction: 26 // 均衡配置=平滑缓入缓出
  }
});
// 高张力+低摩擦力=快速
// 低张力+高摩擦力=慢速

7. Arc

7. 弧线运动

jsx

const [props] = useSpring(() => ({
  to: async (next) => {
    await next({ x: 100, y: -100 });
    await next({ x: 200, y: 0 });
  },
  config: { tension: 200, friction: 20 }
}));

jsx

const [props] = useSpring(() => ({
  to: async (next) => {
    await next({ x: 100, y: -100 });
    await next({ x: 200, y: 0 });
  },
  config: { tension: 200, friction: 20 }
}));

8. Secondary Action

8. 次要动作

jsx

const buttonSpring = useSpring({ scale: hover ? 1.05 : 1 });
const iconSpring = useSpring({
  rotate: hover ? 15 : 0,
  delay: 50
});

jsx

const buttonSpring = useSpring({ scale: hover ? 1.05 : 1 });
const iconSpring = useSpring({
  rotate: hover ? 15 : 0,
  delay: 50
});

9. Timing

9. 时间节奏

jsx

const configs = {
  fast: { tension: 400, friction: 30 },
  normal: { tension: 170, friction: 26 },
  slow: { tension: 100, friction: 40 },
  wobbly: { tension: 180, friction: 12 }
};
// Or use presets: config.gentle, config.stiff, config.slow

jsx

const configs = {
  fast: { tension: 400, friction: 30 },
  normal: { tension: 170, friction: 26 },
  slow: { tension: 100, friction: 40 },
  wobbly: { tension: 180, friction: 12 }
};
// 也可以使用预设配置：config.gentle, config.stiff, config.slow

10. Exaggeration

10. 夸张表现

jsx

const spring = useSpring({
  scale: 1.5,
  rotate: 720,
  config: { tension: 200, friction: 8 } // low friction = overshoot
});

jsx

const spring = useSpring({
  scale: 1.5,
  rotate: 720,
  config: { tension: 200, friction: 8 } // 低摩擦力=过冲效果
});

11. Solid Drawing

11. 扎实造型

jsx

const spring = useSpring({
  transform: 'perspective(1000px) rotateX(45deg) rotateY(30deg)'
});

jsx

const spring = useSpring({
  transform: 'perspective(1000px) rotateX(45deg) rotateY(30deg)'
});

12. Appeal

12. 吸引力

jsx

const cardSpring = useSpring({
  scale: hover ? 1.02 : 1,
  boxShadow: hover
    ? '0 20px 40px rgba(0,0,0,0.2)'
    : '0 5px 15px rgba(0,0,0,0.1)',
  config: config.gentle
});

jsx

const cardSpring = useSpring({
  scale: hover ? 1.02 : 1,
  boxShadow: hover
    ? '0 20px 40px rgba(0,0,0,0.2)'
    : '0 5px 15px rgba(0,0,0,0.1)',
  config: config.gentle
});

useTrail for Stagger

用useTrail实现 stagger 动画

jsx

const trail = useTrail(items.length, {
  opacity: show ? 1 : 0,
  y: show ? 0 : 20,
  config: { tension: 200, friction: 20 }
});

trail.map((props, i) => <animated.div style={props}>{items[i]}</animated.div>)

jsx

const trail = useTrail(items.length, {
  opacity: show ? 1 : 0,
  y: show ? 0 : 20,
  config: { tension: 200, friction: 20 }
});

trail.map((props, i) => <animated.div style={props}>{items[i]}</animated.div>)

Key React Spring Features

React Spring 核心特性

```
useSpring
```
- Single animation
```
useSprings
```
- Multiple springs
```
useTrail
```
- Staggered animations
```
useChain
```
- Sequence animations
```
useTransition
```
- Mount/unmount animations
```
config
```
presets -
```
gentle
```
,
```
stiff
```
,
```
slow
```
,
```
molasses
```
Physics-based:
```
tension
```
,
```
friction
```
,
```
mass
```
,
```
velocity
```

```
useSpring
```
- 单个动画
```
useSprings
```
- 多个独立动画
```
useTrail
```
- Stagger动画（序列延迟动画）
```
useChain
```
- 动画序列编排
```
useTransition
```
- 挂载/卸载动画
```
config
```
预设 -
```
gentle
```
,
```
stiff
```
,
```
slow
```
,
```
molasses
```
物理驱动：
```
tension
```
（张力）、
```
friction
```
（摩擦力）、
```
mass
```
（质量）、
```
velocity
```
（速度）