React Spring

dylantarre/animation-principles/skills/09-by-tool-framework/react-spring

作者 dylantarre83597134ba8f無授權條款99 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫9 個月前更新

Use when implementing Disney's 12 animation principles with React Spring's physics-based animations

僅含說明Software Development Design & Creative

AI 產生的概覽

指導如何用 React Spring 的物理動畫實作迪士尼十二項動畫原則。

功能: 這項技能提供參考指引與程式碼範例，說明如何用 React Spring 套用迪士尼十二項動畫原則。它以簡短片段逐一解說擠壓與伸展、預備動作、場面調度、跟隨與重疊動作、時間控制、誇張和吸引力等原則。它也介紹 useSpring、useSprings、useTrail、useChain 和 useTransition 等 React Spring 鉤子，以及設定預設值和物理參數。
適用情境: 在建立或調整 React Spring 動畫，並想將動作表現對應到經典動畫原則時使用。適合需要挑選彈簧設定、錯開動畫、序列動畫或掛載／卸載轉場的開發者。
執行需求: 需要一個已安裝 React Spring 函式庫的 React 專案。這項技能不含指令碼或資源，只有說明與程式碼範例。

React Spring Animation Principles

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

1. Squash and Stretch

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

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

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

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. Staging

jsx

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

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

4. Straight Ahead / Pose to Pose

jsx

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

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

jsx

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

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

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

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. Arc

jsx

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

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

jsx

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

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

9. Timing

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

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. Exaggeration

jsx

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

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

11. Solid Drawing

12. Appeal

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

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

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

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

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

來源與署名

來源：dylantarre/animation-principles位於skills/09-by-tool-framework/react-spring提交8359713

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

React Spring

React Spring Animation Principles

1. Squash and Stretch

2. Anticipation

3. Staging

4. Straight Ahead / Pose to Pose

5. Follow Through and Overlapping Action

6. Slow In and Slow Out

7. Arc

8. Secondary Action

9. Timing

10. Exaggeration

11. Solid Drawing

12. Appeal

useTrail for Stagger

Key React Spring Features

來源與署名

更多來自 dylantarre/animation-principles 的技能

Rive Animations

Timing Principle Mastery

Ux Friction

User Feedback Clarity

Straight Ahead Pose Mastery

Universal Solutions

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices