重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
react-spring by dylantarre/animation-principles
npx skills add https://github.com/dylantarre/animation-principles --skill react-spring使用 React Spring 的弹簧物理系统实现迪士尼动画的 12 项基本原则。
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 [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 } }); // 动作
};
const bgSpring = useSpring({ filter: 'blur(3px)', opacity: 0.6 });
const heroSpring = useSpring({ scale: 1.1, zIndex: 10 });
const [props] = useSpring(() => ({
from: { x: 0, y: 0 },
to: [
{ x: 100, y: -50 },
{ x: 200, y: 0 },
{ x: 300, y: -30 }
]
}));
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
const bodySpring = useSpring({ x: 200 });
const hairSpring = useSpring({ x: 200, delay: 50 });
const capeSpring = useSpring({ x: 200, delay: 100, config: { friction: 15 } });
const spring = useSpring({
x: 300,
config: {
tension: 170,
friction: 26 // 平衡 = 平滑的入/出
}
});
// 高张力 + 低摩擦力 = 快速
// 低张力 + 高摩擦力 = 缓慢
const [props] = useSpring(() => ({
to: async (next) => {
await next({ x: 100, y: -100 });
await next({ x: 200, y: 0 });
},
config: { tension: 200, friction: 20 }
}));
const buttonSpring = useSpring({ scale: hover ? 1.05 : 1 });
const iconSpring = useSpring({
rotate: hover ? 15 : 0,
delay: 50
});
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
const spring = useSpring({
scale: 1.5,
rotate: 720,
config: { tension: 200, friction: 8 } // 低摩擦力 = 过冲
});
const spring = useSpring({
transform: 'perspective(1000px) rotateX(45deg) rotateY(30deg)'
});
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 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>)
useSpring - 单一动画useSprings - 多个弹簧动画useTrail - 交错动画useChain - 序列动画useTransition - 挂载/卸载动画config 预设 - gentle, stiff, slow, molassestension, friction, mass, velocity每周安装量
62
代码仓库
GitHub 星标数
22
首次出现
2026年1月24日
安全审计
安装于
codex54
gemini-cli51
opencode50
cursor48
github-copilot46
claude-code44
Implement all 12 Disney animation principles using React Spring's spring physics system.
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 [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 bgSpring = useSpring({ filter: 'blur(3px)', opacity: 0.6 });
const heroSpring = useSpring({ scale: 1.1, zIndex: 10 });
const [props] = useSpring(() => ({
from: { x: 0, y: 0 },
to: [
{ x: 100, y: -50 },
{ x: 200, y: 0 },
{ x: 300, y: -30 }
]
}));
const bodySpring = useSpring({ x: 200 });
const hairSpring = useSpring({ x: 200, delay: 50 });
const capeSpring = useSpring({ x: 200, delay: 100, config: { friction: 15 } });
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 [props] = useSpring(() => ({
to: async (next) => {
await next({ x: 100, y: -100 });
await next({ x: 200, y: 0 });
},
config: { tension: 200, friction: 20 }
}));
const buttonSpring = useSpring({ scale: hover ? 1.05 : 1 });
const iconSpring = useSpring({
rotate: hover ? 15 : 0,
delay: 50
});
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 spring = useSpring({
scale: 1.5,
rotate: 720,
config: { tension: 200, friction: 8 } // low friction = overshoot
});
const spring = useSpring({
transform: 'perspective(1000px) rotateX(45deg) rotateY(30deg)'
});
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 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>)
useSpring - Single animationuseSprings - Multiple springsuseTrail - Staggered animationsuseChain - Sequence animationsuseTransition - Mount/unmount animationsconfig presets - gentle, stiff, slow, molassestension, , , Weekly Installs
62
Repository
GitHub Stars
22
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex54
gemini-cli51
opencode50
cursor48
github-copilot46
claude-code44
Vercel React 最佳实践指南 | Next.js 性能优化与代码规范
10,600 周安装
frictionmassvelocity