mcpField
R
react-spring

react-spring

github.com/dylantarre设计与 UI132521 次安装43 周前更新
代码仓库

关于 react-spring

面向 React 开发者的动画设计技能，说明如何用 React Spring 的弹簧物理实现迪士尼 12 条动画原则，并涵盖常用动画 Hook 与配置。

主要功能

  1. 01用弹簧物理实现 12 条动画原则
  2. 02演示单体与多体动画
  3. 03支持错峰、序列与过渡动画
  4. 04提供弹簧参数和预设

适用场景

  1. 01为界面元素制作弹性动画
  2. 02编排分步或错峰动画
  3. 03为元素挂载与卸载添加过渡

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dylantarre/animation-principles --skill react-spring

安装后在 Claude Code 中输入/react-spring确认已加载。

详细介绍

React Spring 动画原理

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

1. 挤压与拉伸

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. 预备动作

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
};

3. 演出布局

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

4. 连续动作 / 姿势到姿势

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

5. 跟随动作与重叠动作

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

6. 慢入与慢出

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

7. 弧线运动

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

8. 次要动作

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

9. 时间节奏

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

10. 夸张

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

11. 扎实绘制

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

12. 吸引力

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 实现错落动画

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

React Spring 的关键特性

  • useSpring - 单个动画
  • useSprings - 多个弹簧
  • useTrail - 错落动画
  • useChain - 序列动画
  • useTransition - 挂载 / 卸载动画
  • config 预设 - gentle、stiff、slow、molasses
  • 基于物理：tension、friction、mass、velocity

评论

支持 Markdown