Skip to Content

描述

  • 性能强大,兼容性强的JS动画框架

功能

  • 使得页面元素各种属性进行运动变换

实现

动画方法

具体方法

  • gsap.to()：从当前状态变化到指定状态
  • gsap.from()：从指定状态变化到当前状态
  • gsap.fromTo()：定义开始和结束状态，动画从开始状态变化到结束状态
  • gsap.set()：立即设置状态，不产生动画效果

方法参数

  • 动画方法接受两个参数：目标元素和动画参数
  • 目标元素: GSAP底层实际上是使用了document.querySelector( )去选择元素
  • 常见动画参数包含: 动画内容 duration: 动画持续的时间 delay: 动画开始前的延迟时间 ease: 控制动画的运动曲线 repeat: 动画重复的次数 repeatDelay: 动画重复之间的延迟时间 yoyo: 如果设置为 true，则动画在每次重复时会反向播放，创建来回移动的效果 stagger: 如果有多个动画目标，可以设置每个动画开始之间的间隔时间 动画事件 onComplete：动画结束时触发 onStart：动画开始时触发 onUpdate：只要动画运行，每一帧都会触发（元素有属性变化时） onRepeat：每次动画重复时触发 onReverseComplete：当动画反向执行后运动到变化起始点时触发
gsap.to(".box", {
  x: 200,
  duration: 1,
  delay: 0.5,
  repeat: 3
});

动画控制

  • 对一个动画内部的时间节点进行控制
// 通过一个变量保存对Tween或者Timeline实例的引用
let tween = gsap.to("#logo", {duration: 1, x: 100});
 
// 暂停
tween.pause();
 
// 恢复（继续）
tween.resume();
 
// 反向变化
tween.reverse();
 
// 直接切换到整个动画变化时长的0.5秒的时间点的状态
tween.seek(0.5);
 
// 直接切换到整个变化过程的1/4的节点的状态
tween.progress(0.25);
 
// 让运动减速到0.5倍
tween.timeScale(0.5);
 
// 让变化加速到原来的2倍
tween.timeScale(2);
 
// 直接销毁tween实例，让垃圾回收机制可以处理该实例所占用的内存
tween.kill();

时间线

创建对象

  • 使用gsap.timeline()创建时间线，用于组织和控制多个动画的顺序和同步
// 创建一个Timeline类型的实例
let tl = gsap.timeline()
 
// 把tween动画添加到timeline实例上
tl.to(".green", { x: 600, duration: 2 });
tl.to(".purple", { x: 600, duration: 1 });
tl.to(".orange", { x: 600, duration: 1 });

默认设置

  • gsap.timeline({defaults: { }})中通过参数设置的defaults属性，都会被添加到这个时间线上的tween动画继承
var tl = gsap.timeline({defaults: {duration: 1}});
 
//这样每个动画都是1秒的时长，不用重复写了
tl.to(".green", {x: 200})
  .to(".purple", {x: 200, scale: 0.2})
  .to(".orange", {x: 200, scale: 2, y: 20});

position参数

  • 在时间线中,动画方法可以再加入第三个参数,来控制该动画再时间线上的位置
  • 类型 label: 动画插入到时间线上对应label的位置 number: 以整个时间线动画的启动时间点为参考, 插入到对应数字的秒数 >: 插入到前面一个动画的结束时间点位置 <: 插入到前面一个动画的开始时间点位置 +=: 以时间线上前一个动画为参数 -=: 以时间线上前一个动画为参数 %: 表示一段时间的占比
  • 这些类型可以进行组合 +=1: 表示当前时间线结束后再过1秒的时间点位置，相当于有个1秒的间隔 -=1: 表示当前时间线结束时间点前1秒的时间点位置，相当于有个1秒的时间重叠 myLabel+=2: 表示在myLable这个标记后过两秒的时间点位置 <+=3: 表示前一个动画起始点后3秒的位置 <3: 和上面一个意思（’<‘和’>‘直接跟数字，其实就是和’<+=3’或者’>+=3’是一样的意思） >-0.5: 前一个动画的结束时间点前0.5秒的时间点位置 -=25%: 放到前面已经添加的动画总时长的末尾25%的位置 +=50%: 以前面所有动画总时长的50%作为时间间隔 <25%: 以前一个动画启动时间点为时间点，放到前一个动画时长的25%的位置。 <+=25%: 以前一个动画启动时间点为时间点，向后放到全部动画总时长的25%的时间点的位置。 myLabel+=30%: 以myLabel标记位置为起始点，向后挪以整个以添加到时间线上的动画总时长的30%的时长作为插入的时间点。
// 把动画添加到标记所在的位置
var tl = gsap.timeline();
tl.to(".green", {duration: 1, x: 750})
  //把blueGreenSpin标记添加到当前时间线末尾之后的1秒的时间点
  .add("blueGreenSpin", "+=1")
  // 把动画添加到blueGreenSpin这个标记所在的时间点
  .to(".purple", {duration: 2, x: 750, rotation: 360}, "blueGreenSpin")
  // 把动画添加到blueGreenSpin这个标记所在的时间点之后0.5秒的时间点
  .to(".orange", {duration: 2, x: 750, rotation: 360}, "blueGreenSpin+=0.5");

关键帧

  • 对时间线上的每一点进行描述,而不是将一段段动画通过时间串起来
  • GSAP提供了多种关键帧的写法

Object keyframes

  • 给keyframes属性传入一个数组，这个数组里面是多个对象，这些对象的效果是依次执行
gsap.to(".elem", {
 keyframes: [ // 注意这里是数组
  {x: 100, duration: 1, ease: 'sine.out'}, // 定义这个分段动画自己的ease曲线
  {y: 200, duration: 1, delay: 0.5}, // 产生和前个分段动画0.5秒的间隔
  {rotation: 360, duration: 2, delay: -0.25} // 和前一个分段动画产生0.25秒的重叠
 ],
 ease: 'expo.inOut' // 设置整个关键帧动画的曲线
});

Percentage keyframes

  • 不需要给每一段动画单独设置时长和延时，只要给整体设置一个时长，然后确定每个分段动画的时间比例
gsap.to(".elem", {
 keyframes: {  // 注意这里是对象
  "0%":   { x: 100, y: 100},
  "75%":  { x: 0, y: 0, ease: 'sine.out'}, // 指定这个分段的动画曲线
  "100%": { x: 50, y: 50 },
   easeEach: 'expo.inOut' // 每个分段的动画曲线
 },
 ease: 'none' // 整个关键帧动画的动画曲线
 duration: 2,
})

Simple Array-based keyframes

  • 通过数组的方式，各个分段自动平均分总时长
gsap.to(".elem", {
 keyframes: { // 注意这里是对象
  x: [100, 0, 50], // 数组分段，也就是两段动画，100-0，,0-50
  y: [100, 0, 50]
  easeEach: 'sine.inOut' // 每个分段都设置成这个动画曲线
  ease: 'expo.out' // 关键帧整体的动画曲线设置
 },
 duration: 2, // 总时长2秒，这里有两段，平均分就是每段的时长是1秒
})
Last updated on
Map