SuperAPI AI 工具集

gsap

前端与建站

查看项目

更新于 10-16 00:30

技能介绍

用途:GSAP 是专业级 JavaScript 动画库,用于实现网页动画、时间线编排、滚动触发动画、SVG 动画与布局过渡。

主要能力:提供高性能补间(tween)、时间线(timeline)精确排序、缓动(ease)、ScrollTrigger 滚动联动,以及插件扩展。核心概念包括 Tween、Timeline、Ease、ScrollTrigger、Plugin。

安装:npm install gsap;React 钩子 npm install @gsap/react。插件需在应用入口注册一次,例如 import gsap from 'gsap'、import { ScrollTrigger } from 'gsap/ScrollTrigger'、gsap.registerPlugin(ScrollTrigger)。

常用用法:gsap.to('.box', { x: 200, duration: 1 });gsap.from('.box', { opacity: 0, y: 50, duration: 0.5 });用 gsap.timeline() 串联动画,支持 '-=0.5' 重叠与 '<' 同步起点。滚动动画通过 scrollTrigger 配置 trigger、start、end、scrub。React 中推荐 useGSAP 钩子自动清理。

参考索引覆盖速查表、核心、缓动、时间线、交错、工具函数、ScrollTrigger、ScrollSmoother、SplitText、SVG 插件、Flip、React、Observer/Draggable、文本插件。

适用场景:加载淡入、列表交错、滚动触发、模态框时间线控制、SVG 描边与变形、路径运动、布局动画、拖拽与手势检测、平滑滚动与视差。

限制与注意:插件未注册则不生效;React 中需清理避免内存泄漏;同属性冲突补间需用 overwrite 或 killTweensOf;DOM 布局变化后需 ScrollTrigger.refresh();避免动画不存在的元素;from() 会立即渲染可能闪烁,可用 CSS 初始态或 fromTo;选择器需限定作用域。资料称 GSAP 3.13+(2025-04)起,GSAP 及原会员插件通过公开 gsap npm 包在 GSAP Standard No-Charge License 下分发,ScrollTrigger、Observer、Draggable、Flip、TextPlugin、ScrollSmoother、SplitText、DrawSVG、MorphSVG、MotionPath、ScrollTo 均包含且免费。具体授权与价格细节以官方为准,本资料未提供更多收费信息。