【GSAP3教程】如何创建一个 Tween

上一篇就简单说了下GSAP2和GSAP3的区别，也简单说了gsap.to()的使用方法，这篇主要说如何创建一个Tween。

1

创建Tween的三个方法

gsap有三个方法可以快速创建一个Tween:

1. gsap.to(targets, vars )

   从原本属性变化到 vars 中定义的属性

2. gsap.from(targets, vars )

   从 vars 中定义的属性 变化到 原本属性

3. gsap.fromTo(targets, fromVars , toVars)

   从 fromVars 中定义的属性 变化到 toVars 中定义的属性
   

参数

targets：这可以是选择器文本，如".class"， "#id"等(GSAP内部使用document.querySelectorAll())，或者它可以是对元素的直接引用，通用对象，甚至是对象数组。

vars：一个对象，包含你想要动画的所有属性/值，以及任何特殊属性，如ease, duration, delay，或onComplete。

2

Tween使用方法

我们用gsap的上面三个方法实现一个css平移效果。