SuperAPI AI 工具集

gsap-fundamentals

设计与创作

查看项目

更新于 10-15 17:25

技能介绍

用途:介绍 GreenSock 动画平台(GSAP)的核心动画概念,用于实现基础动画、过渡与交互效果。

主要能力:涵盖四类补间方法——gsap.to()(从当前状态到目标)、gsap.from()(入场动画)、gsap.fromTo()(显式起止)、gsap.set()(即时设置属性);支持变换属性(x、y、xPercent、yPercent、rotation、rotationX/Y、scale、skew、transformOrigin 等)、CSS 属性(颜色、尺寸、透明度、边框、阴影等)与 SVG 属性(attr、strokeDashoffset、drawSVG,morphSVG 需 MorphSVGPlugin)。时间控制包括 duration、delay、repeat、repeatDelay、yoyo、stagger(支持 each、from、grid、axis)。缓动提供 power1-4 的 in/out/inOut、back、elastic、bounce、circ、expo、sine,并可用 CustomEase 自定义。补间实例支持 play、pause、resume、reverse、restart、seek、progress、time、timeScale、kill 等控制,以及 onStart、onUpdate、onComplete、onRepeat、onReverseComplete 回调。目标可为 CSS 选择器、DOM 引用、NodeList、数组或普通对象属性。

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

适用场景:淡入淡出、滑动、缩放、脉冲、数字翻转等常见动画模式。

限制:资料未提供收费、价格、平台与效果保证等信息;性能上建议优先使用 transform 属性而非 left/top/width 等触发布局的属性,组件卸载时应 kill 补间。时间线与复杂序列、React 集成、ScrollTrigger 滚动动画见其他相关技能。