mcpField
G
gsap-greensock

gsap-greensock

github.com/dylantarre设计与 UI132735 次安装43 周前更新
代码仓库

关于 gsap-greensock

这是一份使用 GSAP 时间线和补间动画实践 Disney 12 条动画原则的指南，面向制作网页动画的开发者。示例涵盖缓动、运动路径、序列编排和动作重叠。

主要功能

  1. 0112 条动画原则的示例
  2. 02基于时间线编排动画
  3. 03缓动、错开与循环控制
  4. 04运动路径与动作重叠技巧

适用场景

  1. 01制作角色或界面元素动画
  2. 02编排多段连续动作
  3. 03实现曲线运动和错开效果

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dylantarre/animation-principles --skill gsap-greensock

安装后在 Claude Code 中输入/gsap-greensock确认已加载。

详细介绍

GSAP 动画原理

使用 GSAP 强大的时间轴和补间系统，实现迪士尼的全部 12 条动画原理。

1. 挤压与拉伸

gsap.to(".ball", {
  scaleX: 1.2,
  scaleY: 0.8,
  yoyo: true,
  repeat: 1,
  duration: 0.15,
  ease: "power2.inOut"
});

2. 预备动作

const tl = gsap.timeline();
tl.to(".character", { y: 20, scaleY: 0.9, duration: 0.2 }) // wind up
  .to(".character", { y: -200, duration: 0.4, ease: "power2.out" }); // action

3. 演出布局

gsap.to(".background", { filter: "blur(3px)", opacity: 0.6 });
gsap.to(".hero", { scale: 1.1, zIndex: 10 });

4. 直线动作法 / 姿势到姿势法

// Pose to pose with explicit keyframes
gsap.to(".sprite", {
  keyframes: [
    { x: 0, y: 0 },
    { x: 100, y: -50 },
    { x: 200, y: 0 },
    { x: 300, y: -30 }
  ],
  duration: 1
});

5. 跟随动作与重叠动作

const tl = gsap.timeline();
tl.to(".body", { x: 200, duration: 0.5 })
  .to(".hair", { x: 200, duration: 0.5 }, "-=0.4")  // overlaps
  .to(".cape", { x: 200, duration: 0.6 }, "-=0.45"); // more drag

6. 慢入与慢出

gsap.to(".element", {
  x: 300,
  duration: 0.6,
  ease: "power2.inOut" // slow in and out
});
// Other eases: "power3.in", "power3.out", "elastic.out"

7. 弧线运动

gsap.to(".ball", {
  motionPath: {
    path: [{ x: 0, y: 0 }, { x: 100, y: -100 }, { x: 200, y: 0 }],
    curviness: 1.5
  },
  duration: 1
});

8. 次要动作

const tl = gsap.timeline();
tl.to(".button", { scale: 1.1, duration: 0.2 })
  .to(".icon", { rotation: 15, duration: 0.15 }, "<") // same time
  .to(".particles", { opacity: 1, stagger: 0.05 }, "<0.1");

9. 时间节奏

// Fast snap
gsap.to(".fast", { x: 100, duration: 0.15 });
// Gentle float
gsap.to(".slow", { y: -20, duration: 2, ease: "sine.inOut", yoyo: true, repeat: -1 });

10. 夸张

gsap.to(".element", {
  scale: 1.5,        // exaggerated scale
  rotation: 720,     // multiple spins
  duration: 0.8,
  ease: "back.out(2)" // overshoot
});

11. 扎实绘制

gsap.to(".box", {
  rotationX: 45,
  rotationY: 30,
  transformPerspective: 1000,
  duration: 0.5
});

12. 吸引力

gsap.to(".card", {
  scale: 1.02,
  boxShadow: "0 20px 40px rgba(0,0,0,0.2)",
  duration: 0.3,
  ease: "power1.out"
});

GSAP 时间轴模式

const masterTL = gsap.timeline({ defaults: { ease: "power2.out" }});
masterTL
  .add(anticipation())
  .add(mainAction())
  .add(followThrough());

GSAP 核心功能

  • gsap.timeline() - 按顺序播放动画
  • ease - 30 多种内置缓动函数
  • stagger - 错开多个元素的动画
  • motionPath - 弧线和路径动画
  • yoyo / repeat - 循环控制
  • "<" / "-=0.2" - 用于重叠的位置参数

评论

支持 Markdown