GSAP的基本介绍

详情可见

1.什么是GSAP?
    GSAP(GreenSock Animation Platform)是一个从flash时代一直发展到今天的专业动画库

    2.GSAP优点
    1、速度快。GSAP专门优化了动画性能，使之实现和CSS一样的高性能动画效果。
    2、轻量与模块化。模块化与插件式的结构保持了核心引擎的轻量，TweenLite包非常小（基本上低于7kb）。GSAP提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不同功能的动画模块，你可以按需使用。
    3、没有依赖。
    4、灵活控制。不用受限于线性序列，可以重叠动画序列，你可以通过精确时间控制，灵活地使用最少的代码实现动画。

    3.GSAP版本
    GSAP提供4个库文件供用户使用
    1.TweenLite：这是GSAP动画平台的核心部分，使用它可以用来实现大部分的动画效果，适合来实现一些元素的简单动画效果。
    2.TimelineLite：一个强大的，轻量级的序列工具，它就如一个存放补间动画的容器，可以很容易的整体控制补间动画，且精确管理补间动画彼此之间的时间关系。比如动画的各种状态，Pause，reverse，restart，speed up，slow down，seek time，add labels等。它适合来实现一些复杂的动画效果。
    3.TimelineMax：扩展TimelineLite，提供完全相同的功能再加上有用的（但非必需）功能，如repeat，repeatDelay，yoyo，currentLabel()等。TimelineMax的目标是成为最终的全功能工具，而不是轻量级的。
    4.TweenMax：可以完成TimelineLite做的每一件事，并附加非必要的功能，如repeat，yoyo，repeatDelay(重复延迟)等。它也包括许多常见的插件，如CSSPlugin，这样您就不需自行载入多个文件。侧重于全功能的，而不是轻量级的。
    >>建议在开发中使用TweenMax这个全功能的js文件，它包括了GreenSock动画平台的所有核心的功能。

    官网地址：http://www.greensock.com/
    github地址：https://github.com/greensock/GreenSock-JS/
    中文网: https://www.tweenmax.com.cn/
    * */
    // 1.创建TweenMax对象
    /*
    第一个参数: 需要执行动画的元素
    第二个参数: 动画执行的时长
    第三个参数: 具体执行动画的属性
    * */
    new TweenMax(".box", 3, {x: 500});
    // 2.利用静态方法执行动画
    // 从当前位置到指定位置
    TweenMax.to(".box", 3, {x: 500});
    // 从指定位置到当前位置
    TweenMax.from(".box", 3, {x: 500});
    // 从第一个指定的位置到第二个指定的位置
    TweenMax.fromTo(".box", 3, {x: 500}, {x: 200});