上一篇就简单说了下GSAP2和GSAP3的区别，也简单说了gsap.to()的使用方法，这篇主要说如何创建一个Tween。
1 创建Tween的三个方法
gsap有三个方法可以快速创建一个Tween:
- gsap.to(targets, vars ) 从原本属性变化到 vars 中定义的属性
- gsap.from(targets, vars ) 从 vars 中定义的属性 变化到 原本属性
- gsap.fromTo(targets, fromVars , toVars) 从 fromVars 中定义的属性 变化到 toVars 中定义的属性
参数
targets：这可以是选择器文本，如".class"， "#id"等(GSAP内部使用document.querySelectorAll())，或者它可以是对元素的直接引用，通用对象，甚至是对象数组。
vars：一个对象，包含你想要动画的所有属性/值，以及任何特殊属性，如ease, duration, delay，或onComplete。
2 Tween使用方法
我们用gsap的上面三个方法实现一个css平移效果。
1. gsap.to()
gsap.to('#box',{duration:5,x:500})
id为box的元素，从初始位置5秒钟在x轴平移500像素，
添加描述
2. gsap.from()
gsap.from('#box',{duration:5,x:500})
id为box的元素，从500像素的位置5秒钟平移到初始位置，
添加描述
3. gsap.fromto()
gsap.fromTo('#box',{x:-100},{duration:5,x:500})
id为box的元素，从x轴-100像素的位置，5秒钟移动到500像素的位置
添加描述
注意：这里有个需要注意的地方，就是在 fromTo 方法中, duration 等动画属性，需要放置在 toVars 参数中, 不能放置在 fromVars 中。
vars这个对象里我们还可以使用一些高级用法，想要对动画增加一些事件，那就可以使用onStart、onUpdate、onComplete 等回调方法 。那我们就可以这么使用
gsap.to('#box',{ duration:5, x:500, onStart:function(){ // 这里写逻辑 }, onUpdate:function(){ // 这里写逻辑 }})
同时我们可以控制Tween，调用方法时，会返回一个实例，我们就可以通过这个实例来对这个动画进行控制。
添加描述
var tween = gsap.to('#box',{duration:5,x:500})document.querySelector("#play").onclick=()=> tween.play(); document.querySelector("#pause").onclick=()=> tween.pause(); document.querySelector("#resume").onclick=()=> tween.resume(); document.querySelector("#restart").onclick=()=> tween.restart();
通过对实例方法的调用，就可以控制动画。这里只是部分方法，具体请看官方文档。下篇文章我们讲解使用时间轴。
