gsap 补间动画插件让动画效果更流程

在vue项目开发中，我们除了可以通过wowjs来给页面增加动画效果外，也可以通过使用gsap补间动画来让页面元素动起来。

安装依赖

npm install gsap

使用

// typical import
import gsap from "gsap";

// 引入其他插件
import ScrollTrigger from "gsap/ScrollTrigger";
import Flip from "gsap/Flip";
import Draggable from "gsap/Draggable";

// 注册插件
gsap.registerPlugin(ScrollTrigger, Draggable, Flip);

设置动画

从上往下动画

通过gsap实现让div从上往下移动效果

gsap.to('.header', {duration: 1, y: 78})

gsap动画完成后回调

使用onComplete监听结束事件

gsap.to('.divBox', {
  duration: 1, x: 78, onComplete: () => {
    console.log('动画完成')
  }
})

gsap动画开始回调

使用onStart监听开始事件

gsap.to('.divBox', {
  duration: 1, x: 78,
  onStart: () => {
    console.log('动画开始')
  }
})

设置gsap动画次数

使用repeat控制重复次数，使用-1就是一直循环。

gsap.to('.divBox', {
  duration: 1, x: 78, repeat: 2
})

设置gsap动画往返

通过yoyo来实现往返运动

gsap.to('.divBox', {
  duration: 1, x: 78, repeat: 2, yoyo: true,
})

设置gsap动画延迟

通过delay来设置延迟执行比如延迟2秒delay:2

gsap.to('.divBox', {
  duration: 1, x: 78, repeat: 2, delay: 2
})

暂停gsap动画

通过pause来控制gsap的动画暂停

var animate1 = gsap.to('.divBox', {
  duration: 1, x: 78, repeat: -1, delay: 2, yoyo: true, onComplete: () => {
    console.log('动画完成')
  },
  onStart: () => {
    console.log('动画开始')
  }
})
window.addEventListener('dblclick', () => {
  animate1.pause()
})

恢复gsap动画

通过isActive来监听动画是否执行,通过resume来控制动画恢复

var animate1 = gsap.to('.divBox', {
  duration: 1, x: 78, repeat: -1, delay: 2, yoyo: true, onComplete: () => {
    console.log('动画完成')
  },
  onStart: () => {
    console.log('动画开始')
  }
})
window.addEventListener('dblclick', () => {
  if (animate1.isActive()) {
    animate1.pause()
  } else {
    animate1.resume()
  }
})

gsap.to(targets, vars)

从初始位置（或状态）到目标位置（或状态）的动画
targets：产生动画的对象
vars：目标状态参数
当前的位置移动到100的位置

gsap.to("div", {
  duration: 5,
  x: 100
});

gsap.from(targets, vars)

从设置位置（或状态）到初始位置（或状态）的动画
targets：产生动画的对象
vars：设置状态参数
从100的位置移动到初始位置

gsap.from("div", {
  duration: 5,
  x: 100
});

gsap.fromTo(targets, vars, vars)

从开始位置（或状态）到结束位置（或状态）的动画
targets：产生动画的对象
vars（第1个）：开始状态参数
vars(第2个)：结束状态参数

gsap.fromTo("div", {
  x: 100
},{
  duration: 5,
  x: 300
});

targets

设置动画的对象，可以是“.class”、“id”等选择器文本（GSAP内使用document.querySelectorAll(), 具体可参考该用法），也可以是对元素、泛型对象甚至对象数组。

vars

包含要设置动画的所有属性/值的对象，以及任何特殊属性，如ease、duration、delay或onComplete（如下所列）。

callbackScope

用于所有回调（onStart、onUpdate、onComplete等）的范围（this句柄）。
在所有回调中this默认指向该tween。若设置callbackScope ，this则指向该设置对象。

data

将任意数据赋给该属性（字符串或对象引用等），以便可以在任何地方tween.data访问该数据。

delay

动画开始前的延迟量（秒）。

duration

动画持续的时间（秒）。默认值：0.5。

ease

动画的运动方式。比如“elastic”(弹性)， “strong.inOut”(强烈的先快后慢)等，默认值：“power1.out”(渐缓)

id

为tween实例分配id（可选），以便之后使用gsap.getById()来获取该tween。

gsap.to("div", {
  id: "myTween",
  duration: 2,
  x: 100
})

gsap.getById("myTween")

immediateRender

通常在不设置delay(延迟)的情况下，tween会在下一帧进行渲染，如果设置为true, 将会强制它在实例化时立即呈现。默认值：false。
由于gsap.from和gsap.fromTo 他们需要从一个状态开始运动，初始状态需要在实例化时立即渲染呈现。所以在它们的fromvars 中immediateRender是默认为true, 而在gsap.to的vars中默认为false。
当immediateRender为false时，不立即渲染到起始位置，而等到2秒延迟后，才从起始位置开始运动。而设置true时，则在实例化时就立即渲染到起始位置。

gsap.from("div", {
  delay: 2,
  x: 500,
  immediateRender: false
})

inherit

通常tween的属性从其所属timeline的defaults继承而来，但是可以通过设置inherit:false来禁止继承, 具体可参考gsap.defaults详解

lazy

当tween第一次渲染并读取其初始值时，GSAP将尝试延迟值的写入，直到当前的tick(更新循环)的最后再进行写入，这样可以提高性能。因为它避免了浏览器读/写/读/写的频繁操作，这种频繁的操作会极大的消耗性能并造成布局抖动。设置lazy:false便禁用这种延迟渲染，但是不建议禁用。默认值：true。

onCompleteParams

传递给onComplete函数的参数数组

gsap.to("div", {
  x: 500,
  onComplete: complete,
  onCompleteParams: [2, "str"]
})

function complete(i, str){
  //i = 2, str = "str"
}

onRepeat

当动画重复时调用的函数。需要设置repeat（大于0）才会有效。

onRepeatParams

传递给onRepeat 函数的参数数组。

onReverseComplete

当动画从反方向再次达到开始位置时要调用的函数。需要设置reversed: true

onReverseCompleteParams

传递给onReverseComplete函数的参数数组。

onStart

动画开始时要调用的函数。

onStartParams

传递给onStartParams函数的参数数组。

onUpdate

每次动画更新时（每帧）调用的函数。

onUpdateParams

传递给onUpdate函数的参数数组。

overWrite

如果设置true, 该对象的其他动画（任何属性）就会被停止；如果设置auto，只会停止其他动画的相关属性动画；如果false，则不停止任何动画，最后呈现的动画效果是各个动画相互作用的结果。默认值：false

gsap.to("div", {
  x: 500,
  y: 500
})

gsap.to("div", {
  x: 300,
  overwrite: false,
})

如果设置false（或不设置），2个动画都正常运行，div的x值是2个动画相互作用的结果。
如果设置true, 直接会停止第一个动画（x,y的动画都会被停止），最终呈现的是x运动到300，而y没有变化（不会运动到500）。
如果设置auto, 只会停止第一个动画的x动画，对于y的动画不受影响，最终呈现的是x运动到300，y运动到500。

paused

如果设置true,动画将在创建时立即暂停。默认值：false

let tween = gsap.to("div", {
  x: 500,
  paused: true
});
tween.play();

repeat

设置动画重复的次数。设置1为重复两次，默认值：0。设置-1为无限重复。

repeatDelay

每次动画重复之间等待的时间（秒）。默认值：0

repeatRefresh

设置true 会导致重复的动画失效，因为每次完成一次后，会重新更新其开始和结束值。如果属性使用的动态值（随机或函数），会得到特别的动画效果。默认值：false。
从0位置向右运动500，重复5次

gsap.to("div", {
  x: 500,
  repeat: 5
});

如果设置repeatRefresh：true后则看起来只会重复一次。因为每次重复都会重新更新开始和结束值，第2次重复时起始值更新为500，结束值也是500。所以第2次到第5次位置未发生任何变化。

gsap.to("div", {
  x: 500,
  repeat: 5,
  repeatRefresh: true
});

reversed

如果设置true，动画将调转方向超其开始方向移动。由于开始已经是初始位置，设置true后动画将显示为暂停。默认值：false。

gsap.to("div", {
  delay: 2,
  duration: 2,
  x: 500,
  onComplete: function(){
    this.reversed(true);
  }
});

runBackwards

如果设置true, 动画将翻转其起始值和结束值，但对于ease不会反转。可以通过设置true将gsap.to 转换为gsap.from。默认值：false。

gsap.to("div", {
  x: 500,
  runBackwards: true,
});

stagger

如果是多个动画目标，可以通过设置类似stagger:0.1（每个目标动画开始之间间隔0.1秒）来错开每个动画。或可以设置参数对象来实现更高级的动画效果，具体参考staggers详解。

所有的div都向右移动500，每个div间隔0.2秒开始移动。

gsap.to("div", {
  x: 500,
  stagger: 0.2
});

startAt

定义任何属性的起始值（即便它们没有设置动画）。

gsap.to("div", {
  x: 500,
  startAt: {
    y: 500,
    alpha: 0.5
  }
});

yoyo

如果设置true，则每隔一次的重复都将以反方向的方向运动，动画呈现来回运动的效果。单次运动无效，需要配合repeat使用。默认值：false。

gsap.to("div", {
  x: 500,
  repeat: 5,
  yoyo: true
});

yoyoEase

允许你改变yoyo过程中的ease。可以指定特定的ease（例如：“power2.in”），可以设置true来翻转原本的ease。默认值：false。另外：启动了该属性后，yoyo会自动设置true。

如果不设置yoyoEase:true，yoyo过程应该是逐渐加快，设置后原本的ease进行了翻转，变为逐渐减慢。

gsap.to("div", {
  x: 500,
  repeat: -1,
  yoyoEase: true
});

yoyo过程设置了一个弹性的ease

gsap.to("div", {
  x: 500,
  repeat: -1,
  yoyoEase: "elastic"
});

keyframes

对同一对象的一连串的动画（关键帧动画）。和一连串的gsap.to等效。使用帧动画实现环绕效果
沿x轴向右运动100，停顿1秒，再沿x轴向右运动到200的位置，同时y轴运动到200。

gsap.to("div", {
  keyframes: [
    {
      x: 100
    },
    {
      delay: 1,
      x: 200,
      y: 200
    }
  ]
});

Function类型

通过使用function类型参数来实现更复杂的动画效果。

每个div的运动的y值不同，按顺序依次多100。第一个div运动到{x:100, y:0}的位置，第2个div运动到{x:100,y:100}的位置，第3个div运动到{x:100,y:200}的位置，依次类推。

gsap.to("div", {
  x: 100,
  y: function(index, target, targets){
    return index * 100;
  }
});

偶数索引的div沿y轴运动100，其他div则y保持不变。

index: 当前运动对象的索引
target：当前运动对象
targets: 全部运动对象的数组

gsap.to("div", {
  x: 100,
  y: function(index, target, targets){
    return index % 2 === 0 ? 100 : 0;
  }
});

当前内容为观看threejs视频教程 Three.js可视化企业实战WEBGL课课程-Gsap动画库基本使用与原理-学习并自行扩展笔记

补间动画实现效果