@devflow-tools/plugin-animation 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +123 -0
- package/dist/index.js.map +1 -0
- package/package.json +30 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,eAAO,MAAM,eAAe,EAAE,aA8H7B,CAAC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
export const animationPlugin = {
|
|
2
|
+
meta: {
|
|
3
|
+
name: "animation",
|
|
4
|
+
version: "0.1.0",
|
|
5
|
+
description: "Animation 动画专家 — CSS 动画、Framer Motion、GSAP、Lottie、性能优化",
|
|
6
|
+
icon: "✨",
|
|
7
|
+
tags: ["frontend", "animation", "css", "framer-motion", "gsap"],
|
|
8
|
+
},
|
|
9
|
+
knowledge: {
|
|
10
|
+
sources: [
|
|
11
|
+
{
|
|
12
|
+
name: "animation-docs",
|
|
13
|
+
urls: [
|
|
14
|
+
"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations",
|
|
15
|
+
"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions",
|
|
16
|
+
"https://www.framer.com/motion/",
|
|
17
|
+
],
|
|
18
|
+
pluginName: "animation",
|
|
19
|
+
version: "2024",
|
|
20
|
+
},
|
|
21
|
+
],
|
|
22
|
+
},
|
|
23
|
+
memory: {
|
|
24
|
+
project: {
|
|
25
|
+
stack: ["CSS Animations", "Framer Motion", "GSAP", "Lottie"],
|
|
26
|
+
conventions: [
|
|
27
|
+
{ key: "gpu", value: "动画属性只使用 transform 和 opacity（GPU 加速）", source: "manual", confidence: 0.95 },
|
|
28
|
+
{ key: "duration", value: "过渡动画 200-300ms，入场动画 300-500ms，复杂编排 < 1s", source: "manual", confidence: 0.85 },
|
|
29
|
+
{ key: "easing", value: "使用 ease-out 入场、ease-in 退场、cubic-bezier 自定义弹性", source: "manual", confidence: 0.8 },
|
|
30
|
+
{ key: "reduced-motion", value: "尊重 prefers-reduced-motion，提供减弱动画方案", source: "manual", confidence: 0.9 },
|
|
31
|
+
],
|
|
32
|
+
},
|
|
33
|
+
global: [
|
|
34
|
+
{
|
|
35
|
+
id: "animation:gpu-properties",
|
|
36
|
+
source: "animation",
|
|
37
|
+
title: "GPU 加速动画属性",
|
|
38
|
+
content: "只使用 transform（translate/rotate/scale/skew）和 opacity 做动画。避免动画 width/height/top/left 触发 layout。使用 will-change 提前创建 GPU 层。始终使用 transform: translateZ(0) 强制 GPU 渲染。",
|
|
39
|
+
embedding: [],
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
id: "animation:easing-principles",
|
|
43
|
+
source: "animation",
|
|
44
|
+
title: "缓动函数设计原则",
|
|
45
|
+
content: "自然运动是非线性的。ease-out 用于元素进入屏幕（减速到达）。ease-in 用于元素离开（加速离开）。ease-in-out 用于循环动画。弹性缓动使用 cubic-bezier() 自定义。Material Design 标准缓动：standard-decelerate/accelerate/sharp。",
|
|
46
|
+
embedding: [],
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
id: "animation:framer-motion-patterns",
|
|
50
|
+
source: "animation",
|
|
51
|
+
title: "Framer Motion 常用模式",
|
|
52
|
+
content: "AnimatePresence 处理退出动画。layout prop 自动布局动画。variants 管理多状态动画。useScroll/useTransform 实现滚动驱动动画。staggerChildren 实现子元素依次动画。whileHover/whileTap 交互反馈。",
|
|
53
|
+
embedding: [],
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
id: "animation:performance-audit",
|
|
57
|
+
source: "animation",
|
|
58
|
+
title: "动画性能审计",
|
|
59
|
+
content: "Chrome DevTools Rendering Tab 检查 Paint Flash 和 FPS。避免非 60fps 动画（jank）。避免同时动画过多元素。使用 CSS 而非 JS 动画（compositor thread 执行）。Lottie 动画控制帧率和复杂度。",
|
|
60
|
+
embedding: [],
|
|
61
|
+
},
|
|
62
|
+
],
|
|
63
|
+
},
|
|
64
|
+
workflow: {
|
|
65
|
+
steps: [],
|
|
66
|
+
templates: [
|
|
67
|
+
{
|
|
68
|
+
name: "animation-audit",
|
|
69
|
+
description: "动画审计：性能检查 → 可访问性 → 实现质量",
|
|
70
|
+
version: "1.0.0",
|
|
71
|
+
steps: [
|
|
72
|
+
{ id: "scan-animations", description: "扫描项目中所有动画实现（CSS/keyframes/Framer/GSAP/Lottie）", type: "simple", timeout: 10000 },
|
|
73
|
+
{ id: "check-gpu", description: "检查动画是否使用 GPU 加速属性（transform/opacity）", type: "simple", depends: ["scan-animations"], timeout: 10000 },
|
|
74
|
+
{ id: "check-performance", description: "检查动画 FPS（是否保持 60fps）和 Paint 区域", type: "simple", depends: ["scan-animations"], timeout: 15000 },
|
|
75
|
+
{ id: "check-accessibility", description: "检查 prefers-reduced-motion 支持", type: "simple", depends: ["scan-animations"], timeout: 5000 },
|
|
76
|
+
{ id: "generate-report", description: "生成动画审计报告（性能问题 + 可访问性 + 改进建议）", type: "llm", depends: ["check-gpu", "check-performance", "check-accessibility"], timeout: 15000 },
|
|
77
|
+
{ id: "fix-animations", description: "修复动画问题（GPU 加速替代 + 减弱动画方案）", type: "llm", depends: ["generate-report"], timeout: 20000 },
|
|
78
|
+
],
|
|
79
|
+
triggers: [{ type: "cli", command: "audit:animation" }],
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
name: "new-animation",
|
|
83
|
+
description: "新建动画：需求分析 → 选型建议 → 实现 → 性能验证",
|
|
84
|
+
version: "1.0.0",
|
|
85
|
+
steps: [
|
|
86
|
+
{ id: "analyze-requirements", description: "分析动画需求（入场/退场/交互动效/滚动/编排）", type: "llm", timeout: 10000 },
|
|
87
|
+
{ id: "suggest-approach", description: "建议实现方案（CSS/Framer Motion/GSAP/Lottie 选型）", type: "llm", depends: ["analyze-requirements"], timeout: 10000 },
|
|
88
|
+
{ id: "implement-animation", description: "实现动画（含 GPU 加速 + 缓动 + 响应式）", type: "llm", depends: ["suggest-approach"], timeout: 15000 },
|
|
89
|
+
{ id: "add-reduced-motion", description: "添加 prefers-reduced-motion 减弱动画", type: "simple", depends: ["implement-animation"], timeout: 5000 },
|
|
90
|
+
{ id: "performance-check", description: "验证动画 60fps + 检查不会触发 layout", type: "simple", depends: ["implement-animation"], timeout: 10000 },
|
|
91
|
+
],
|
|
92
|
+
triggers: [{ type: "cli", command: "new:animation" }],
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
name: "migrate-to-gpu",
|
|
96
|
+
description: "动画 GPU 迁移：扫描 → 替换为 GPU 属性 → 验证",
|
|
97
|
+
version: "1.0.0",
|
|
98
|
+
steps: [
|
|
99
|
+
{ id: "find-cpu-animations", description: "扫描使用 width/height/top/left 的动画", type: "simple", timeout: 10000 },
|
|
100
|
+
{ id: "analyze-impact", description: "分析每处 CPU 动画的性能影响级别", type: "llm", depends: ["find-cpu-animations"], timeout: 10000 },
|
|
101
|
+
{ id: "replace-with-transform", description: "替换 CPU 动画为 transform（translate 替代 top/left，scale 替代 width/height）", type: "llm", depends: ["analyze-impact"], timeout: 20000 },
|
|
102
|
+
{ id: "add-will-change", description: "添加 will-change 优化层创建时机", type: "simple", depends: ["replace-with-transform"], timeout: 5000 },
|
|
103
|
+
{ id: "benchmark", description: "迁移前后 FPS 和 Paint 次数对比", type: "simple", depends: ["add-will-change"], timeout: 15000 },
|
|
104
|
+
],
|
|
105
|
+
triggers: [{ type: "cli", command: "migrate:gpu-animation" }],
|
|
106
|
+
},
|
|
107
|
+
],
|
|
108
|
+
},
|
|
109
|
+
prompt: {
|
|
110
|
+
system: "你是一个动画专家。精通 CSS Animation、Framer Motion、GSAP。动画必须 60fps 且支持 prefers-reduced-motion。",
|
|
111
|
+
rules: [
|
|
112
|
+
"动画属性只使用 transform 和 opacity（GPU 加速）",
|
|
113
|
+
"过渡动画 200-300ms，入场 300-500ms",
|
|
114
|
+
"使用 ease-out 入场、ease-in 退场",
|
|
115
|
+
"尊重 prefers-reduced-motion，提供减弱方案",
|
|
116
|
+
"避免同时动画过多元素（批量编排使用 staggerChildren）",
|
|
117
|
+
"使用 AnimatePresence 处理 React 组件退出动画",
|
|
118
|
+
"Lottie 动画控制文件大小 < 50KB",
|
|
119
|
+
],
|
|
120
|
+
},
|
|
121
|
+
tools: [],
|
|
122
|
+
};
|
|
123
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@devflow-tools/plugin-animation",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"main": "./dist/index.js",
|
|
6
|
+
"types": "./dist/index.d.ts",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"import": "./dist/index.js",
|
|
10
|
+
"types": "./dist/index.d.ts"
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
"scripts": {
|
|
14
|
+
"build": "tsc -b",
|
|
15
|
+
"test": "vitest run",
|
|
16
|
+
"typecheck": "tsc --noEmit",
|
|
17
|
+
"clean": "rm -rf dist"
|
|
18
|
+
},
|
|
19
|
+
"dependencies": {
|
|
20
|
+
"@devflow-tools/sdk": "*"
|
|
21
|
+
},
|
|
22
|
+
"devDependencies": {
|
|
23
|
+
"typescript": "^5.5.0",
|
|
24
|
+
"vitest": "^2.0.0"
|
|
25
|
+
},
|
|
26
|
+
"files": [
|
|
27
|
+
"dist"
|
|
28
|
+
],
|
|
29
|
+
"gitHead": "4cede97fc7fc673f929427fac169acab100ca8ed"
|
|
30
|
+
}
|