第18章 GSAP高级插件概览

npm install gsap@3.13.0

import gsap from "gsap";
import { SplitText } from "gsap/SplitText";
import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";

gsap.registerPlugin(SplitText, MorphSVGPlugin);

<h1 class="split-title">从补间到叙事</h1>

<script>
const st = new SplitText(".split-title", {
  type: "lines,words,chars",  // 拆分方式
  linesClass: "line",         // 行容器的class
  wordsClass: "word",         // 词容器的class
  charsClass: "char",         // 字符容器的class
});

// 字符逐个飞入
gsap.from(st.chars, {
  opacity: 0,
  y: 60,
  rotation: 10,
  duration: 0.6,
  stagger: 0.03,
  ease: "back.out(1.7)",
});

// 清理（组件卸载时）
st.revert();
</script>

const st = new SplitText(".title", { type: "chars,words" });

// 用法1：入场（in）—— 文字从不可见飞进来
gsap.from(st.chars, {
  opacity: 0,
  y: 80,
  rotationX: -90,
  stagger: 0.04,
  duration: 0.8,
  ease: "power4.out",
});

// 用法2：退场（out）—— 文字逐个消失
gsap.to(st.chars, {
  opacity: 0,
  y: -50,
  stagger: { from: "end", amount: 0.3 },
  duration: 0.4,
});

// 用法3：效果（effect）—— 不断变化的视觉
gsap.to(st.chars, {
  color: "#e74c3c",
  fontWeight: 700,
  stagger: { from: "center", amount: 0.5 },
  duration: 0.3,
  yoyo: true,
  repeat: 1,
});

const st = new SplitText(".paragraph", { type: "lines" });

gsap.from(st.lines, {
  opacity: 0,
  x: 30,
  duration: 0.5,
  stagger: 0.1,
  scrollTrigger: {
    trigger: ".paragraph",
    start: "top 80%",
  },
});

<h1 id="decrypt">解码中...</h1>

<script>
const tl = gsap.timeline();

tl.to("#decrypt", {
  scrambleText: {
    text: "从补间到叙事",
    chars: "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",  // 乱码字符集
    revealDelay: 0.5,       // 开始揭示前的整体延迟（秒）
    speed: 0.3,             // 乱码更新速度系数，不是秒
    newClass: "revealed",   // 揭示后的字符添加的class
    tweenLength: false,      // 是否动画文本长度
  },
  duration: 2,
});
</script>

scrambleText: {
  text: "目标文字",                    // 必需：最终显示的文字
  chars: "!@#$%^&*()_+-=[]{}|;:",    // 乱码阶段使用的随机字符集
  revealDelay: 0,       // 开始揭示前的整体延迟
  speed: 0.3,           // 乱码字符滚动的速度
  newClass: "fresh",    // 揭示后添加到span上的class
  oldClass: "scrambled",// 乱码中的字符的class
  tweenLength: false,   // true时会动画文字长度变化
  rightToLeft: false,   // 从右向左揭示
  delimiter: "",        // 分隔符
}

<svg viewBox="0 0 800 200">
  <path id="signature"
    d="M50,100 C150,30 250,170 350,100 S550,30 650,100 S700,150 750,80"
    fill="none" stroke="#3498db" stroke-width="4"/>
</svg>

<script>
gsap.registerPlugin(DrawSVGPlugin);

gsap.from("#signature", {
  drawSVG: 0,            // 从0%开始描绘
  duration: 3,
  ease: "power2.inOut",
});

// 或直接使用 to
gsap.to("#signature", {
  drawSVG: "100%",       // 描绘到100%
  duration: 3,
  ease: "power2.inOut",
});
</script>

// 从20%描绘到80%
gsap.fromTo("#path",
  { drawSVG: "20% 20%" },    // 起点20%，终点也在20%（线条不可见）
  { drawSVG: "20% 80%", duration: 2 }  // 起点20%，终点80%
);

// 描绘 + 擦除效果
const tl = gsap.timeline({ repeat: -1, yoyo: true });
tl.fromTo("#path",
  { drawSVG: 0 },
  { drawSVG: "100%", duration: 2, ease: "power2.inOut" }
);
tl.to("#path", { drawSVG: "0% 100%", duration: 1, ease: "power2.in" });

<svg viewBox="0 0 300 300">
  <path id="shape" d="M150,50 L250,150 L150,250 L50,150 Z" fill="#3498db"/>
</svg>
<button onclick="morph()">变换形状</button>

<script>
gsap.registerPlugin(MorphSVGPlugin);

function morph() {
  // 菱形 → 圆形
  gsap.to("#shape", {
    duration: 1.5,
    morphSVG: "M150,20 C230,20 280,70 280,150 C280,230 230,280 150,280 C70,280 20,230 20,150 C20,70 70,20 150,20 Z",
    ease: "power2.inOut",
  });
}
</script>

// 在多个路径之间变形
const shapes = [
  "#star",      // 星形
  "#hexagon",   // 六边形
  "#circle",    // 圆形
  "#square",    // 方形
];

let index = 0;
document.querySelector("button").addEventListener("click", () => {
  index = (index + 1) % shapes.length;
  gsap.to("#shape", {
    duration: 1,
    morphSVG: shapes[index],
    ease: "power2.inOut",
  });
});

// findShapeIndex 辅助
// shapeIndex:"auto" 让插件自动匹配；视觉辅助使用独立的 findShapeIndex 工具，非 MorphSVGPlugin 静态方法。

morphSVG: {
  shape: "#targetShape",    // 目标形状的选择器或路径字符串
  shapeIndex: 2,            // 调整两条路径的起始点匹配
  type: "linear",           // 默认 linear；可选 rotational
  map: "size",              // 控制点映射方式："size" | "position" | "complexity"
  origin: "50% 50%",        // 变形中心点
  precompile: "log",        // 输出可预编译的数据，或传入预编译路径数组
}

<div class="physics-ball">⚽</div>

<script>
gsap.registerPlugin(Physics2DPlugin);

gsap.to(".physics-ball", {
  duration: 2,
  physics2D: {
    velocity: 300,        // 初始速度（扔出去的力度）
    angle: -45,           // 发射角度（度）
    gravity: 400,         // 重力加速度（px/s²）
    acceleration: 0,      // 自身加速度
    accelerationAngle: 0, // 加速度方向
    friction: 0.2,        // 摩擦系数（0-1，越大停得越快）
  },
  ease: "none",           // 物理动画必须用none
});
</script>

// 有限时长抛物线，超出容器可以被裁剪；它不会自动反弹。
gsap.to(ball, { duration:2, ease:'none', physics2D:{ velocity:200, angle:-60, gravity:300 } });

gsap.registerPlugin(CustomEase);

// 方法1：可视化创建
CustomEase.create("myBounce", "M0,0 C0.5,0 0.5,1 1,1");
// 路径格式：M(startX,startY) C(cp1X,cp1Y, cp2X,cp2Y, endX,endY)

// 方法2：从GreenSock可视化工具复制
// 访问 https://gsap.com/docs/v3/Eases/CustomEase/
CustomEase.create("elasticCustom", "M0,0,C0.2,0,0.2,0.8,0.5,1,0.8,0.8,0.8,0,1,0");

// 使用
gsap.to(".box", {
  x: 300,
  duration: 2,
  ease: "myBounce",
});

// 强烈弹性——超出目标很多再弹回来
CustomEase.create("superElastic", "M0,0 C0.2,0.1 0.25,1 0.25,1 C0.25,1 0.3,0.3 0.3,0.3 C0.3,0.3 0.35,1 0.35,1 C0.4,0.4 0.45,0.1 0.5,0 C0.6,-0.1 0.7,0.2 0.8,0.5 C0.9,0.8 0.95,0.6 1,1");

gsap.from(".item", {
  opacity: 0,
  y: 100,
  duration: 1.5,
  stagger: 0.1,
  ease: "superElastic",
});

// 仅在开发环境加载
if (process.env.NODE_ENV === "development") {
  GSDevTools.create();
}

// 绑定到特定动画
const tl = gsap.timeline();
tl.to(".box", { x: 200, duration: 1 });
tl.to(".box", { y: 200, duration: 1 });

GSDevTools.create({ animation: tl });

gsap.registerPlugin(InertiaPlugin);
gsap.to(slider, {
  inertia: {
    x: { velocity:200, min:0, max:500, end:gsap.utils.snap(20) },
    resistance:500,
    duration:{ min:0.5, max:3, overshoot:0 }
  }
});

# 核心与全部插件均来自公开的 gsap 包
npm install gsap@3.13.0

// 使用真实文本；仅拆字符时改善中英混排中的不自然断词
const st = new SplitText(".chinese-title", {
  type: "chars",
  smartWrap: true,
});

// 注意：物理位置不会变成 power2.out 曲线
gsap.to(".ball", {
  physics2D: { velocity: 300, angle: -45, gravity: 400 },
  ease: "power2.out",  // Physics2D 的位置按时间计算；该缓动仍可影响同一 Tween 的其他属性
});

// 只做物理位置时，建议明确 ease: "none"
gsap.to(".ball", {
  physics2D: { velocity: 300, angle: -45, gravity: 400 },
  ease: "none",
});