用途
该技能用于在 GSAP(GreenSock Animation Platform)中实现迪士尼的十二项动画原理。它面向使用 GSAP 制作网页或界面动画的开发者,提供每项原理对应的 GSAP 代码写法,帮助把动画理论落到具体的时间轴与补间配置上。
主要能力
资料按十二项动画原理逐条给出 GSAP 示例:
- 挤压与拉伸(Squash and Stretch):通过 scaleX / scaleY 配合 yoyo、repeat、duration 与 ease 实现。
- 预备动作(Anticipation):用 gsap.timeline() 先做蓄力动作,再执行主动作。
- 舞台调度(Staging):对背景使用 filter blur 与 opacity,对主体使用 scale 与 zIndex 突出焦点。
- 逐帧与关键帧(Straight Ahead / Pose to Pose):使用 keyframes 数组定义多个姿态点。
- 跟随与重叠动作(Follow Through and Overlapping Action):在时间轴中用 "-=0.4"、"-=0.45" 等位置参数让身体、头发、披风依次错开。
- 慢入慢出(Slow In and Slow Out):通过 ease 如 "power2.inOut"、"power3.in"、"power3.out"、"elastic.out" 控制。
- 弧线(Arc):使用 motionPath 的 path 与 curviness 实现弧线运动。
- 次要动作(Secondary Action):用 "<"、"<0.1" 位置参数让图标旋转、粒子 stagger 与主动作同步或错开。
- 时间节奏(Timing):用不同 duration 与 ease 区分快速与缓慢动作。
- 夸张(Exaggeration):放大 scale、增加 rotation 圈数,并用 "back.out(2)" 制造过冲。
- 立体感(Solid Drawing):使用 rotationX、rotationY 与 transformPerspective 营造三维透视。
- 吸引力(Appeal):通过 scale、boxShadow 与 ease 提升视觉质感。
此外,资料给出 GSAP 时间轴组合模式:创建带 defaults 的 masterTL,再用 add() 依次加入预备动作、主动作与跟随动作。
使用方式
资料中的示例均以 gsap.to()、gsap.timeline() 等 GSAP API 直接书写,可作为实现对应动画原理时的参考代码。关键 GSAP 特性包括:gsap.timeline() 用于串联动画;ease 提供 30 多种内置缓动函数;stagger 用于错开多个元素;motionPath 用于弧线与路径动画;yoyo / repeat 用于循环控制;"<" 与 "-=0.2" 等位置参数用于控制重叠。
适用场景
适用于需要在 GSAP 中实现上述十二项动画原理的网页或界面动画开发场景,例如角色动作、元素入场、交互反馈与路径运动等。
限制
资料未提供该技能的安装命令、依赖版本、平台兼容性、收费与价格信息,也未说明具体使用步骤或效果保证,这些内容暂未提供。