SuperAPI AI 工具集

gsap-core

设计与创作

查看项目

更新于 10-16 00:30

技能介绍

用途:GSAP Core 提供动画的基础构件——tween(单个动画)与 timeline(tween 序列),用于实现元素入场、退场、悬停、状态切换与按时间轴编排的动画。

主要能力:gsap.to(target, vars) 从当前值动画到目标值;gsap.from 从指定起始值动画到当前值,适合入场效果;gsap.fromTo 显式定义起点与终点;gsap.set 零时长即时设值,用于初始状态。timeline 支持链式添加 tween,并通过位置参数控制先后与重叠,如 '<'、'>'、'<0.5'、'>0.5' 及 label 定位。播放控制包括 play、pause、reverse、restart、kill、progress、timeScale、totalProgress 等。支持 stagger(each、from、grid、ease)、keyframes 多阶段动画、onStart/onUpdate/onComplete/onRepeat/onReverseComplete 回调。全局方法有 gsap.killTweensOf、gsap.defaults、gsap.matchMedia、gsap.getById 及 gsap.ticker。

使用方式:安装命令 npm install gsap,导入方式 import gsap from 'gsap'。

适用场景:网页交互动画、滚动触发时间轴、响应式动画编排等。

限制与注意:使用插件(如 ScrollTrigger)需先 gsap.registerPlugin 注册;避免冲突 tween,可用 overwrite 或先 killTweensOf;from() 可能出现闪烁,可改用 CSS 初始状态或 fromTo;应及时清理不再使用的 tween/timeline,并合理使用 matchMedia 做响应式。

以上内容依据所提供的资料整理;具体版本兼容性、许可与收费信息暂未提供。