重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
popmotion by dylantarre/animation-principles
npx skills add https://github.com/dylantarre/animation-principles --skill popmotion使用 Popmotion 的可组合动画函数实现全部 12 条迪士尼动画原则。
import { animate } from "popmotion";
animate({
from: { scaleX: 1, scaleY: 1 },
to: { scaleX: 1.2, scaleY: 0.8 },
duration: 150,
onUpdate: ({ scaleX, scaleY }) => {
element.style.transform = `scaleX(${scaleX}) scaleY(${scaleY})`;
}
});
// 先蓄力再行动
animate({
from: 0,
to: 10,
duration: 200,
onUpdate: v => element.style.transform = `translateY(${v}px) scaleY(0.9)`,
onComplete: () => {
animate({
from: 10,
to: -200,
duration: 400,
ease: easeOut,
onUpdate: v => element.style.transform = `translateY(${v}px)`
});
}
});
animate({
from: 1,
to: 0.6,
onUpdate: v => bg.style.opacity = v
});
animate({
from: 1,
to: 1.1,
onUpdate: v => hero.style.transform = `scale(${v})`
});
import { keyframes } from "popmotion";
keyframes({
values: [
{ x: 0, y: 0 },
{ x: 100, y: -50 },
{ x: 200, y: 0 },
{ x: 300, y: -30 }
],
duration: 1000,
onUpdate: ({ x, y }) => {
element.style.transform = `translate(${x}px, ${y}px)`;
}
});
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
animate({ from: 0, to: 200, duration: 500,
onUpdate: v => body.style.transform = `translateX(${v}px)` });
animate({ from: 0, to: 200, duration: 500, elapsed: -50, // 延迟
onUpdate: v => hair.style.transform = `translateX(${v}px)` });
animate({ from: 0, to: 200, duration: 600, elapsed: -100,
onUpdate: v => cape.style.transform = `translateX(${v}px)` });
import { animate, easeInOut, easeIn, easeOut } from "popmotion";
animate({
from: 0,
to: 300,
duration: 600,
ease: easeInOut,
onUpdate: v => element.style.transform = `translateX(${v}px)`
});
keyframes({
values: [
{ x: 0, y: 0 },
{ x: 100, y: -100 },
{ x: 200, y: 0 }
],
duration: 1000,
ease: easeInOut,
onUpdate: ({ x, y }) => {
element.style.transform = `translate(${x}px, ${y}px)`;
}
});
// 主要动作触发次要动作
animate({
from: 1, to: 1.1, duration: 200,
onUpdate: v => button.style.transform = `scale(${v})`,
onComplete: () => {
animate({
from: 0, to: 15, duration: 150,
onUpdate: v => icon.style.transform = `rotate(${v}deg)`
});
}
});
import { spring } from "popmotion";
// 快速
animate({ from: 0, to: 100, duration: 150 });
// 弹簧物理
spring({
from: 0,
to: 100,
stiffness: 300,
damping: 20,
onUpdate: v => element.style.transform = `translateX(${v}px)`
});
// 慢速
animate({ from: 0, to: 100, duration: 800, ease: easeOut });
spring({
from: { scale: 1, rotate: 0 },
to: { scale: 1.5, rotate: 720 },
stiffness: 200,
damping: 10, // 低值 = 过冲
onUpdate: ({ scale, rotate }) => {
element.style.transform = `scale(${scale}) rotate(${rotate}deg)`;
}
});
animate({
from: { rotateX: 0, rotateY: 0 },
to: { rotateX: 45, rotateY: 30 },
duration: 500,
onUpdate: ({ rotateX, rotateY }) => {
box.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
}
});
animate({
from: 1,
to: 1.02,
duration: 300,
ease: easeOut,
onUpdate: v => {
card.style.transform = `scale(${v})`;
card.style.boxShadow = `0 ${20*v}px 40px rgba(0,0,0,${0.2*v})`;
}
});
animate() - 补间动画spring() - 基于物理的弹簧动画keyframes() - 多步骤动画decay() - 动量/惯性动画easeIn, easeOut, easeInOut - 缓动函数每周安装量
50
代码仓库
GitHub 星标数
22
首次出现
2026 年 1 月 24 日
安全审计
已安装于
codex42
gemini-cli39
cursor39
opencode39
github-copilot36
claude-code35
Implement all 12 Disney animation principles using Popmotion's composable animation functions.
import { animate } from "popmotion";
animate({
from: { scaleX: 1, scaleY: 1 },
to: { scaleX: 1.2, scaleY: 0.8 },
duration: 150,
onUpdate: ({ scaleX, scaleY }) => {
element.style.transform = `scaleX(${scaleX}) scaleY(${scaleY})`;
}
});
// Wind up then action
animate({
from: 0,
to: 10,
duration: 200,
onUpdate: v => element.style.transform = `translateY(${v}px) scaleY(0.9)`,
onComplete: () => {
animate({
from: 10,
to: -200,
duration: 400,
ease: easeOut,
onUpdate: v => element.style.transform = `translateY(${v}px)`
});
}
});
animate({
from: 1,
to: 0.6,
onUpdate: v => bg.style.opacity = v
});
animate({
from: 1,
to: 1.1,
onUpdate: v => hero.style.transform = `scale(${v})`
});
import { keyframes } from "popmotion";
keyframes({
values: [
{ x: 0, y: 0 },
{ x: 100, y: -50 },
{ x: 200, y: 0 },
{ x: 300, y: -30 }
],
duration: 1000,
onUpdate: ({ x, y }) => {
element.style.transform = `translate(${x}px, ${y}px)`;
}
});
animate({ from: 0, to: 200, duration: 500,
onUpdate: v => body.style.transform = `translateX(${v}px)` });
animate({ from: 0, to: 200, duration: 500, elapsed: -50, // delay
onUpdate: v => hair.style.transform = `translateX(${v}px)` });
animate({ from: 0, to: 200, duration: 600, elapsed: -100,
onUpdate: v => cape.style.transform = `translateX(${v}px)` });
import { animate, easeInOut, easeIn, easeOut } from "popmotion";
animate({
from: 0,
to: 300,
duration: 600,
ease: easeInOut,
onUpdate: v => element.style.transform = `translateX(${v}px)`
});
keyframes({
values: [
{ x: 0, y: 0 },
{ x: 100, y: -100 },
{ x: 200, y: 0 }
],
duration: 1000,
ease: easeInOut,
onUpdate: ({ x, y }) => {
element.style.transform = `translate(${x}px, ${y}px)`;
}
});
// Primary action triggers secondary
animate({
from: 1, to: 1.1, duration: 200,
onUpdate: v => button.style.transform = `scale(${v})`,
onComplete: () => {
animate({
from: 0, to: 15, duration: 150,
onUpdate: v => icon.style.transform = `rotate(${v}deg)`
});
}
});
import { spring } from "popmotion";
// Fast
animate({ from: 0, to: 100, duration: 150 });
// Spring physics
spring({
from: 0,
to: 100,
stiffness: 300,
damping: 20,
onUpdate: v => element.style.transform = `translateX(${v}px)`
});
// Slow
animate({ from: 0, to: 100, duration: 800, ease: easeOut });
spring({
from: { scale: 1, rotate: 0 },
to: { scale: 1.5, rotate: 720 },
stiffness: 200,
damping: 10, // low = overshoot
onUpdate: ({ scale, rotate }) => {
element.style.transform = `scale(${scale}) rotate(${rotate}deg)`;
}
});
animate({
from: { rotateX: 0, rotateY: 0 },
to: { rotateX: 45, rotateY: 30 },
duration: 500,
onUpdate: ({ rotateX, rotateY }) => {
box.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
}
});
animate({
from: 1,
to: 1.02,
duration: 300,
ease: easeOut,
onUpdate: v => {
card.style.transform = `scale(${v})`;
card.style.boxShadow = `0 ${20*v}px 40px rgba(0,0,0,${0.2*v})`;
}
});
animate() - Tween animationsspring() - Physics-based springkeyframes() - Multi-step animationsdecay() - Momentum/inertiaeaseIn, easeOut, easeInOut - Easing functionsWeekly Installs
50
Repository
GitHub Stars
22
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex42
gemini-cli39
cursor39
opencode39
github-copilot36
claude-code35
网页可访问性(A11y)开发指南:实现WCAG合规、键盘导航与屏幕阅读器支持
12,600 周安装