重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
motion-one by dylantarre/animation-principles
npx skills add https://github.com/dylantarre/animation-principles --skill motion-one使用 Motion One 高性能 Web Animations API 封装库实现所有 12 项迪士尼动画原理。
import { animate } from "motion";
animate(".ball",
{ scaleX: [1, 1.2, 1], scaleY: [1, 0.8, 1] },
{ duration: 0.3, easing: "ease-in-out" }
);
import { timeline } from "motion";
timeline([
[".character", { y: 10, scaleY: 0.9 }, { duration: 0.2 }],
[".character", { y: -200 }, { duration: 0.4, easing: "ease-out" }]
]);
animate(".background", { filter: "blur(3px)", opacity: 0.6 });
animate(".hero", { scale: 1.1 });
animate(".element", {
x: [0, 100, 200, 300],
y: [0, -50, 0, -30]
}, { duration: 1 });
timeline([
[".body", { x: 200 }, { duration: 0.5 }],
[".hair", { x: 200 }, { duration: 0.5, at: "-0.45" }],
[".cape", { x: 200 }, { duration: 0.6, at: "-0.5" }]
]);
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
animate(".element", { x: 300 }, {
duration: 0.6,
easing: [0.42, 0, 0.58, 1] // cubic-bezier ease-in-out
});
// 或使用:"ease-in", "ease-out", "ease-in-out"
// 或弹簧效果:{ easing: spring({ stiffness: 100, damping: 15 }) }
animate(".ball", {
x: [0, 100, 200],
y: [0, -100, 0]
}, { duration: 1, easing: "ease-in-out" });
// 或使用偏移路径
animate(".element", {
offsetDistance: ["0%", "100%"]
}, { duration: 1 });
// CSS: offset-path: path('M0,100 Q100,0 200,100');
const button = document.querySelector(".button");
button.addEventListener("mouseenter", () => {
animate(button, { scale: 1.05 }, { duration: 0.2 });
animate(".icon", { rotate: 15 }, { duration: 0.15 });
});
import { spring } from "motion";
// 快速弹跳
animate(".fast", { x: 100 }, { duration: 0.15 });
// 弹簧物理效果
animate(".spring", { x: 100 }, {
easing: spring({ stiffness: 300, damping: 20 })
});
// 缓慢戏剧效果
animate(".slow", { x: 100 }, { duration: 0.8, easing: "ease-out" });
import { spring } from "motion";
animate(".element", { scale: 1.5, rotate: 720 }, {
easing: spring({ stiffness: 200, damping: 10 }) // 过冲效果
});
animate(".box", {
rotateX: 45,
rotateY: 30
}, { duration: 0.5 });
// 在 CSS 中设置透视:perspective: 1000px;
animate(".card", {
scale: 1.02,
boxShadow: "0 20px 40px rgba(0,0,0,0.2)"
}, { duration: 0.3, easing: "ease-out" });
import { stagger } from "motion";
animate(".item",
{ opacity: [0, 1], y: [20, 0] },
{ delay: stagger(0.1) }
);
import { scroll, animate } from "motion";
scroll(
animate(".parallax", { y: [0, 100] }),
{ target: document.querySelector(".container") }
);
import { inView } from "motion";
inView(".section", ({ target }) => {
animate(target, { opacity: 1, y: 0 }, { duration: 0.5 });
});
animate() - 单一动画timeline() - 带 at 定位的序列动画stagger() - 延迟偏移spring() - 基于物理的缓动效果scroll() - 滚动关联动画inView() - 交叉观察器封装每周安装量
69
代码仓库
GitHub 星标数
26
首次出现时间
2026 年 1 月 24 日
安全审计
安装于
codex61
opencode57
gemini-cli56
cursor53
github-copilot53
claude-code50
Implement all 12 Disney animation principles using Motion One's performant Web Animations API wrapper.
import { animate } from "motion";
animate(".ball",
{ scaleX: [1, 1.2, 1], scaleY: [1, 0.8, 1] },
{ duration: 0.3, easing: "ease-in-out" }
);
import { timeline } from "motion";
timeline([
[".character", { y: 10, scaleY: 0.9 }, { duration: 0.2 }],
[".character", { y: -200 }, { duration: 0.4, easing: "ease-out" }]
]);
animate(".background", { filter: "blur(3px)", opacity: 0.6 });
animate(".hero", { scale: 1.1 });
animate(".element", {
x: [0, 100, 200, 300],
y: [0, -50, 0, -30]
}, { duration: 1 });
timeline([
[".body", { x: 200 }, { duration: 0.5 }],
[".hair", { x: 200 }, { duration: 0.5, at: "-0.45" }],
[".cape", { x: 200 }, { duration: 0.6, at: "-0.5" }]
]);
animate(".element", { x: 300 }, {
duration: 0.6,
easing: [0.42, 0, 0.58, 1] // cubic-bezier ease-in-out
});
// Or: "ease-in", "ease-out", "ease-in-out"
// Or spring: { easing: spring({ stiffness: 100, damping: 15 }) }
animate(".ball", {
x: [0, 100, 200],
y: [0, -100, 0]
}, { duration: 1, easing: "ease-in-out" });
// Or with offset path
animate(".element", {
offsetDistance: ["0%", "100%"]
}, { duration: 1 });
// CSS: offset-path: path('M0,100 Q100,0 200,100');
const button = document.querySelector(".button");
button.addEventListener("mouseenter", () => {
animate(button, { scale: 1.05 }, { duration: 0.2 });
animate(".icon", { rotate: 15 }, { duration: 0.15 });
});
import { spring } from "motion";
// Fast snap
animate(".fast", { x: 100 }, { duration: 0.15 });
// Spring physics
animate(".spring", { x: 100 }, {
easing: spring({ stiffness: 300, damping: 20 })
});
// Slow dramatic
animate(".slow", { x: 100 }, { duration: 0.8, easing: "ease-out" });
import { spring } from "motion";
animate(".element", { scale: 1.5, rotate: 720 }, {
easing: spring({ stiffness: 200, damping: 10 }) // overshoot
});
animate(".box", {
rotateX: 45,
rotateY: 30
}, { duration: 0.5 });
// Set perspective in CSS: perspective: 1000px;
animate(".card", {
scale: 1.02,
boxShadow: "0 20px 40px rgba(0,0,0,0.2)"
}, { duration: 0.3, easing: "ease-out" });
import { stagger } from "motion";
animate(".item",
{ opacity: [0, 1], y: [20, 0] },
{ delay: stagger(0.1) }
);
import { scroll, animate } from "motion";
scroll(
animate(".parallax", { y: [0, 100] }),
{ target: document.querySelector(".container") }
);
import { inView } from "motion";
inView(".section", ({ target }) => {
animate(target, { opacity: 1, y: 0 }, { duration: 0.5 });
});
animate() - Single animationtimeline() - Sequence with at positioningstagger() - Offset delaysspring() - Physics-based easingscroll() - Scroll-linked animationsinView() - Intersection observer wrapperWeekly Installs
69
Repository
GitHub Stars
26
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex61
opencode57
gemini-cli56
cursor53
github-copilot53
claude-code50
React视图过渡API使用指南:实现原生浏览器动画与状态管理
6,600 周安装
通用项目发布工具 - 多语言更新日志自动生成 | 支持Node.js/Python/Rust/Claude插件
62 周安装
Edge Pipeline Orchestrator:自动化金融交易策略流水线编排工具
62 周安装
Python ROI 计算器:投资回报率、营销ROI、盈亏平衡分析工具
62 周安装
Salesforce Hyperforce 2025架构指南:云原生、零信任安全与开发最佳实践
62 周安装
PowerShell 2025 重大变更与迁移指南:版本移除、模块停用、WMIC替代方案
62 周安装
2025安全优先Bash脚本编写指南:输入验证、命令注入与路径遍历防护
62 周安装