GSAP教程之gsap.to, gsap.from与gsap.fromTo详解

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个)： 结束状态参数
例子：
该动画从100的位置移动到300的位置

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

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

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

vars参数详解

---

callbackScope

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

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

delay
动画开始前的延迟量（秒）。
例子：
在2秒后，向右移动100

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

duration

动画持续的时间（秒）。默认值：0.5。
例子：
用2秒的时间向右移动100

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

ease

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

gsap.to("div", {
   
  duration: 2,
  x: 100,
  ease: "strong.inOut"