简介

版本
**
TweenLite
核心部分，使用它可以实现大部分的动画。
TweenLite是GSAP最基础的核心工具，其优点是快速、轻量级和灵活的功能，简单配置即可制作出丰富的动画效果。
TweenLite还是TimelineLite和TimelineMax的默认生成的动画对象。

TweenMax
可以完成TimelineLite做的每一件事。
TweenMax在TweenLite的基础上添加了stagger，repeat()，yoyo()等功能。
TweenMax不仅仅是升级版的TweenLite，它还包含了许多额外的工具和插件以及时间轴，其功能非常全面。

TimelineLite
时间轴的动画容器，对多个动画进行有序的组织与控制。
TimelineLite是一个轻量级，直观的时间轴类，用于构建和管理TweenLite，TweenMax，TimelineLite和TimelineMax实例的序列。您可以将TimelineLite实例视为一个容器，可以随时放置tween或其他timeline在其中。

TimelineMax
扩展TimelineLite，提供完全相同的功能再加上有用的（但非必需）功能。
TimelineMax提供TimelineLite完全相同的功能以及有用（但非必要）的功能，如repeat，repeatDelay，yoyo，currentLabel()，tweenTo()，tweenFromTo()，getLabelAfter()，getLabelBefore()，getActive()等等。TimelineMax是GSAP最强大，功能最多的排序工具。

动画要素：
**包含四个要素：动画目标（target），启动状态，终点状态，补间效果

//将一个div从opacity：1经过5秒钟降低至opacity：0
TweenLite.fromTo('div', 5, {opacity:1}, {opacity:0});
  //动画目标：div
  //起始状态：opacity:1
  //终点状态：opacity:0
  //补间：5秒完成状态改变

值动画

<span id="text"></span>
<script>
    var text = document.getElementById("text");
    var obj = {
        num: 0
    }
    TweenLite.to(obj, 1, {
        num:100,
        onUpdate: function () {
            text.innerText = obj.num.toFixed(2);
        }
    })
</script>

相对值：

相对当前位置做出变化

TweenLite.to(box, 2, {
        x:"+=300",
        ease: Linear.easeOut,
    })

+= -=

调整放置位置:

如果第二个动画不是第一个动画结束而是提前。

var tl = new TimelineLite();
tl
.from("#ball1", 1, {
    y: "-=60px",
    autoAlpha: 0
})
.from("#ball2", 1, {
    x: "+=60px",
    autoAlpha: 0
}, "-=0.7")
.from("#ball3", 1, {
    y: "+=60px",
    autoAlpha: 0
}, "-=0.7")
.from("#ball4", 1, {
    x: "-=60px",
    autoAlpha: 0
}, "-=0.7");

其中tl.from(target, duration, vars, position)等同于tl.add(TweenLite.from(target, duration, vars), position);

CSS动画

TweenMax中对DOM元素的CSS相关属性进行动画
比如宽度、高度、移动、旋转等动画。

注意
需要将CSS属性写成驼峰式

向右移动100px

<div id="box"></div>
<script>
    var box = document.getElementById("box");
    TweenLite.to(box, 2, {
        x:100
    })
</script>

用x, y 来表示CSS中的translateX, translateY

延迟、缓存动画

TweenLite.to(box, 2, {
        x:100,
        delay:2, // 动画延迟
        ease: Linear.easeOut // 缓动函数
    })

例子

# 容器
width // 宽度
height // 高度
opacity // 透明度
backgroud // 背景颜色
borderRadius// 圆角
color // 字体颜色
fontSize // 字体大小
boxShadow  // 阴影
scaleX // 放大缩小
rotation // 旋转 rotation：deg| rad 
skewX // 扭曲
perspective： 500 // 视觉距离

2D

3D

//为父级元素设置视觉距离(推荐方式)
TweenLite.set(container, {perspective:500});
//全局设置视觉距离
CSSPlugin.defaultTransformPerspective = 500;
//单个元素设置视觉距离 "transformPerspective"
TweenLite.set(element, {transformPerspective:500});

更多请点击文档
https://www.tweenmax.com.cn/CSSPlugin/

动画结构

• TweenMax()

TweenMax( target:Object, duration:Number, vars:Object );
- target    object    是    需要缓动的对象
- duration    number    是    动画持续时间，一般是秒
- vars    object    是    动画参数

• TweenMax.to() 从当前属性到指定目标属性的TweenMax动画对象。 起始状态是默认的CSS代码，目标状态是JS代码

• TweenMax.from() 从未知状态到指定状态。起始状态是JS代码，目标状态是默认的CSS代码

• TweenMax.fromTo() 设置动画起始点和结束点来初始化一个TweenMax

TweenMax.fromTo( target:Object, duration:Number, fromVars:Object, toVars:Object ) : TweenMax
- target    object        需要动画的对象
- duration    number    动画持续时间，一般是秒
- fromVars    object    起始点动画参数
- toVars    object        结束点动画参数

• TweenMax.staggerTo()

TweenMax.staggerTo( 
  targets:Array, //进行动画的对象
  duration:Number, // 动画持续的秒数
  vars:Object, // 设置动画的一些属性及其他参数
  stagger:Number, // 每个动画的起始间隔
  onCompleteAll:Function,  // 当所有显示对象都完成动画后要调用的函数
  onCompleteAllParams:Array, // onCompleteAll函数的参数，以数组形式传入
  onCompleteAllScope:* ) : Array // onCompleteAll函数的作用域，this

需要设置每个动画的开始间隔。如不设置则为零，同时开始动画

• TweenMax.staggerFrom()
• TweenMax.staggerFromTo()
• TweenMax.delayedCall()
• TweenMax.set()

最简单的一个Demo

new TweenMax('.box', 3, {
    x: 500,
    alpha : 0.3,
});
/*还可通过function关键词返回变化值
TweenMax.to(".box", 1, {
  x: function() {
    return Math.random() * 300;
  }
});
*/

动画初始设置

范围在vars内

delay - 延迟

动画开始之前的延迟秒数（以帧为单位时则为帧数）

ease - 速度曲线

过渡效果的速度曲线（缓动效果）。你可以在动画的参数中设置各种缓动来控制动画的变化率，赋予其特定的“感觉”。

TweenLite中包含了基本缓动：Power0、Power1、Power2、Power3、Power4、Linear、Quad、Cubic、Quart、Quint、Strong，他们每个都含有.easeIn、.easeOut、.easeInOut参数（对于线性动画，请使用Power0.easeNone）。
而TweenMax在此基础上还另外增加了特殊缓动：Elastic、Back、Bounce、SlowMo、SteppedEase、RoughEase、Circ、Expo、Sine。
如果想在TweenLite中使用特殊缓动则需要加载缓动类easing/EasePack.min.js 。

paused - 是否暂停

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

useFrames - 对象计算方式

当设置为true时，对这个TweenMax对象的时间计算方式基于帧而不是秒，一般帧速约为16.66ms（60帧/秒）。

yoyo - 重复运行

如果设置yoyo为true，那么重复的动画将往返进行。默认为false

<script>
    new TweenMax(
        ".box",
        1, {
            x: 200,
            repeat: -1,
            yoyo: true
        }
    );
</script>

例如当你设置了repeat:2，如果没设置yoyo，那么动画是这样的123-123-123
如果设置了yoyo，动画则是123-321-123

回调函数

动画开始结束的周期函数

• onStart
• onUpdate
• onComplete

TweenLite.to(box, 2, {
        x:100,
        delay:2,
        ease: Linear.easeOut,
        onStart(){
            console.log("动画开始执行了");
        },
        onUpdate(){
            console.log("动画正在执行中");
        },
        onComplete(){
            console.log("动画执行完毕");
        }
    })

动画控制

// 运动 如果动画播放完成, play() 无效
tween.play()
// 暂停
tween.pause();
// 继续播放 当前位置继续动画
tween.resume();
// 反转播放
tween.reverse();
// 跳转到1s进度处开始播放
tween.seek(1);
// 重播
tween.restart();
// 动画变为三倍速
tween.timeScale(3);

paused()

获取或设置动画的暂停状态，该状态指示动画当前是否已暂停。

var paused = myAnimation.paused(); //获取暂停状态
myAnimation.paused( true ); //设置暂停状态(类似pause())
myAnimation.paused( !myAnimation.paused() ); //切换暂停/非暂停状态

reversed()

获取或设置动画的反转状态，指示是否应该反向播放动画。

var rev = myAnimation.reversed(); //获取反方向状态
myAnimation.reversed( true ); //设置反方向
myAnimation.reversed( !myAnimation.reversed() ); //切换方向

：补充

清空Style属性

TweenLite.to("", 2, {
    x:200,
    clearProps: "all" # 清空样式  | clearProps:"scale,left"
})

AutoAlpha

autoAlpha是opacity和visibility这2个css属性的结合。
opacity为0的不可见元素，我们会认为它也是不可交互的（比如onclick不触发），因此附加visibility: hidden可以保证这一点。GSAP会正确处理动画过程中这2个css属性的变化

End-参考

中文网
https://www.tweenmax.com.cn/
官网
http://www.greensock.com/