控制函数

GSAP 提供了多种控制动画的函数。

Tweens

let tween = gsap.to("#container", { duration: 1, x: 100 });

// 暂停动画
tween.pause();

// 恢复动画
tween.resume();

// 反向播放动画
tween.reverse();

// 跳转到动画的特定时间点
tween.seek(0.5);

// 设置动画的进度
tween.progress(0.25);

// 改变动画的速度(动画速度放慢一半)
tween.timeScale(0.5);

// 改变动画的速度(动画速度加快一倍)
tween.timeScale(2);

// 销毁动画实例
tween.kill();

// 组合使用多个控制函数
tween.timeScale(2).reverse();

See the Pen by GreenSock on CodePen.

Timelines

let timelines = gsap.timeline();

// 添加 label, tween, timeline 或 callback
timelines.add(thing, position);

// 在给定位置调用函数
timelines.call(func, params, position);

// 获取 timeline 子 tween | timeline 数组
timelines.getChildren();

// 清空时间轴
timelines.clear();

// 线性的动画到指定位置
timelines.tweenTo(timeOrLabel, { vars });

// 同时包含开始和结束位置
timelines.tweenFromTo(from, to, { vars });

公共函数

// 立即销毁动画
.kill()

// 如果正在动画，则返回true
.isActive()

// 清除记录的 start/end 值
.invalidate()

// get/set 一个事件回调
.eventCallback()