GASP动画和ScrollMagic

一、GSAP基础

1.GSAP开篇

1.什么是ScrollMagic?
ScrollMagic是一个滚动视差插件
ScrollMagic本身比较简单，只包含2个类：
crollMagic.Controller 一个控制器类，用于总体的调度；
ScrollMagic.Scene 一个场景类，用于设计具体的变换。

需要注意的是，它本身并没有集成 animation的控制方法，动画的实现，需要引入插件 GSAP 或者是 Velocity；

什么是GSAP?
GSAP(GreenSock Animation Platform)是一个从flash时代一直发展到今天的专业动画库
GSAP优点
1、速度快。GSAP专门优化了动画性能，使之实现和CSS一样的高性能动画效果。
2、轻量与模块化。模块化与插件式的结构保持了核心引擎的轻量，TweenLite包非常小（基本上低于7kb）。GSAP提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不同功能的动画模块，你可以按需使用。
3、没有依赖。
4、灵活控制。不用受限于线性序列，可以重叠动画序列，你可以通过精确时间控制，灵活地使用最少的代码实现动画。
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/

<head>
    <meta charset="UTF-8">
    <title>01-GSAP开篇</title>
    <script src="js/TweenMax.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script>
// new TweenMax(".box", 3, {x: 500});
    // 2.利用静态方法执行动画，数字3 为持续时间
    // 从当前位置到指定位置
    // TweenMax.to(".box", 3, {x: 500});
    // 从指定位置到当前位置
    // TweenMax.from(".box", 3, {x: 500});
    // 从第一个指定的位置到第二个指定的位置
    TweenMax.fromTo(".box", 3, {x: 500}, {x: 200});
</script>

2.GSAP交叉动画

<head>
    <meta charset="UTF-8">
    <title>02-GSAP交叉动画</title>
    <script src="js/TweenMax.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
        .box2{
            background: blue;
        }
        .box3{
            background: green;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<script>
    // TweenMax.staggerTo([".box1", ".box2", ".box3"], 3, {x: 500}, 3);
    // TweenMax.staggerFrom([".box1", ".box2", ".box3"], 3, {x: 500}, 3);
    //最后一个元素为间隔时间，前面一个开始3秒后，执行后一个
    TweenMax.staggerFromTo([".box1", ".box2", ".box3"], 3, {x: 500}, {x: 200}, 3);
</script>
</body>

3.GSAP动画属性

<head>
    <meta charset="UTF-8">
    <title>03-GSAP动画属性</title>
    <script src="js/TweenMax.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script>
    new TweenMax(".box", 3, {
        // 设置动画开始之前的延迟时间
        // delay: 2,
        // 设置动画初识值
        startAt: {
            x: 100
        },
        // 设置动画结束值
        css: {
            x: 500,
        },
        // 设置动画重复执行的次数
        // 无限重复 -1
        repeat: 2,
        // 设置动画重复执行的往返动画
        yoyo: true,
        // 设置重复动画开始之前的延迟时间
        repeatDelay: 3,
        // 设置动画执行的节奏
        ease: Bounce.easeOut,
        yoyoEase: Bounce.easeOut
    });
</script>
</body>

4.GSAP循环动画

<head>
    <meta charset="UTF-8">
    <title>04-GSAP循环动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            display: inline-block;
            width: 50px;
            height: 50px;
            background: #ccc;
            border: 1px solid #000;
            border-radius: 10px;
        }
    </style>
    <script src="js/TweenMax.js"></script>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script>
    let oDivs = document.querySelectorAll(".box");
    TweenMax.staggerTo(oDivs, 3, {
        cycle: {
            height: [100, 150, 200],
            backgroundColor: ["red", "green", "blue"]
        }
    }, 3);
</script>
</body>

5.GSAP动画常用事件

<head>
    <meta charset="UTF-8">
    <title>05-GSAP动画常用事件</title>
    <script src="js/TweenMax.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script>
    let obj = {name: "lnj"};
    TweenMax.to(".box", 3, {
        x: 500,
        delay: 3,
        onStart:function(a, b, c){
            // console.log("动画开始了", a, b, c);
            console.log(this);
        },
        //传递参数
        onStartParams:["123", "456", "789"],
        //修改this指向
        onStartScope: obj,
    });
</script>
</body>

6.GSAP动画常用方法

<head>
    <meta charset="UTF-8">
    <title>06-GSAP动画常用方法</title>
    <script src="js/TweenMax.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<div class="box"></div>
<button class="start">开始</button>
<button class="paused">暂停</button>
<button class="toggle">切换</button>
<button class="restart">重新开始</button>
<script>
    let tm = TweenMax.to(".box", 3, {
        x: 500,
        paused: true
    });
    // console.log(tm);
    let oStartBtn = document.querySelector(".start");
    oStartBtn.onclick = function () {
        tm.play();
    }

    let oPauseBtn = document.querySelector(".paused");
    oPauseBtn.onclick = function () {
        tm.pause();
    }

    let oToggleBtn = document.querySelector(".toggle");
    oToggleBtn.onclick = function () {
        // tm.paused(true);
        // tm.paused(false);
        // console.log(tm.paused());
        tm.paused(!tm.paused());
    }

    let oRestartBtn = document.querySelector(".restart");
    oRestartBtn.onclick = function () {
        tm.restart();
    }
</script>
</body>

7.GSAP动画管理

<head>
    <meta charset="UTF-8">
    <title>07-GSAP动画管理</title>
    <script src="js/TweenMax.js"></script>
    <!--<script src="js/TimelineMax.js"></script>-->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: #ccc;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<script>

//前面一个执行完动画后接着执行下一个
    let tm = new TimelineMax();
    tm.add(
        TweenMax.to(".box1", 4, {
            x: 500
        })
    );
    tm.add(
        TweenMax.to(".box2", 3, {
            x: 400
        })
    );
    tm.add(
        TweenMax.to(".box3", 3, {
            x: 300
        })
    );
</script>
</body>

二、Velocity基础

1.Velocity开篇

1.什么是Velocity?
Velocity 是一个简单易用、性能极高、功能丰富的轻量级JS动画库。
它能和 jQuery / Zepto 完美协作，并和 $.animate() 有相同的 API，但它不依赖 jQuery，可单独使用。
Velocity 不仅包含了 $.animate() 的全部功能，还拥有：颜色动画、转换动画(transforms)、循环、缓动、SVG 动画、和滚动动画等特色功能

官方地址（下载文件）: https://github.com/julianshapiro/velocity
中文文档: http://shouce.jb51.net/velocity/index.html

2.Velocity基本使用

2.1导入Velocity文件
2.2利用Velocity实现动画

<head>
    <meta charset="UTF-8">
    <title>08-Velocity开篇</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/velocity.js"></script>

</head>
<body>
<div class="box"></div>
<script>
// 1.单独使用
    /*
    let oDiv = document.querySelector(".box");
    Velocity(oDiv, {
        height: "300px"
    }, {
        duration: 3000
    });
    */

    // 2.配合jQuery使用
    // 注意点: 必须先导入jQuery, 再导入velocity
    $(".box").velocity({
        height: "300px"
    }, {
        duration: 3000
    });
</script>
</body>

3.Velocity常用配置

<head>
    <meta charset="UTF-8">
    <title>09-Velocity常用配置</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/velocity.js"></script>
</head>
<body>
<div class="box"></div>
<script>
    $(".box").velocity({
        marginLeft: "500px"
    }, {
        duration: 3000,
        // 设置动画开始之前的延迟时间
        // delay: 2000,
        // 设置动画循环的次数
        // 注意点: 从初始位置到指定位置再到初始的位置算一次
        // loop: 2,
        // 设置动画运动的节奏
        // easing: "easeInOutQuint",
        // 设置动画结束之后元素的状态
        // display: "none",
        // visibility: "hidden"
        // 设置动画队列
        // 注意点: 只要设置了动画队列动画就不会自动执行
        queue: "a"
    });

    $(".box").velocity({
        marginTop: "500px"
    }, {
        duration: 3000,
        queue: "b"
    });

//给一个对象分别加了两个动画（a和b），下面是设置执行这两个动画的先后顺序
    $(".box").dequeue("a");
    setTimeout(function () {
        $(".box").dequeue("b");
    }, 3000)
</script>
</body>

4.Velocity常用事件

<head>
    <meta charset="UTF-8">
    <title>10-Velocity常用事件</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/velocity.js"></script>
</head>
<body>
<div class="box"></div>
<script>
    $(".box").velocity({
        marginLeft: "500px"
    }, {
        duration: 3000,
        delay: 2000,
        begin: function(elements) {
            console.log("动画开始了", elements);
        },
        complete: function(elements) {
            console.log("动画结束了", elements);
        },
        /*
        elements：当前执行动画的元素，可以用$(elements)来获取
        complete：整个动画过程执行到百分之多少，该值是递增的，注意：该值为一个十进制数值 并不带单位 (%)
        remaining：整个动画过程还剩下多少毫秒，该值是递减的
        start：动画开始时的绝对时间 (Unix time)
        tweenValue：动画执行过程中 两个动画属性之间的补间值
        * */
        progress: function(elements, complete, remaining, start, tweenValue) {
            // console.log("动画正在执行");
            console.log((complete * 100) + "%");
        }
    });
</script>
</body>

三、ScrollMagic基础

注：ScrollMagic和GSAP、Velocity配合使用时，还需添加他们的连接文件（animation.gsap、animation.velocity）；
另外，GSAP动画会随着滚动条的滚动而滚动，Velocity动画不会随着滚动条的滚动而滚动；

1.ScrollMagic开篇

1.什么是ScrollMagic?
ScrollMagic是一个神奇的滚动效果的插件.
如果你想在特定的滚动位置开始一个动画，并且让动画同步滚动条的动作，
或者把元素粘在一个特定的滚动位置，那么这款插件正是你需要的。
使用 ScrollMagic，你可以很容易地让动画和滚动条的动作同步。
使用 ScrollMagic，你可以很容易地把视差效果添加到您的网站中。

2.ScrollMagic特点:
优化性能
轻量级（压缩后只有6KB）
灵活可扩展
兼容移动设备
强大的事件管理
支持响应式网页设计
面向对象的编程方式和链式编程方式
代码可读性强
支持两个方向的滚动（even different on one page）
支持在div容器中滚动（一个页面可以支持多个div）
完善的调试和日志记录功能

3.官网地址: http://ScrollMagic.io
下载地址：https://github.com/janpaepke/ScrollMagic
官方文档: http://scrollmagic.io/docs/index.html

<head>
    <meta charset="UTF-8">
    <title>11-ScrollMagic开篇</title>
    <script src="js/ScrollMagic.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header{
            width: 100%;
            height: 100px;
            background: #000;
        }
        div{
            width: 100%;
            height: 200px;
        }
        .section1{
            background: red;
        }
        .section2{
            background: green;
        }
        .section3{
            background: blue;
        }
        .section4{
            background: deeppink;
        }
        footer{
            width: 100%;
            height: 2000px;
            background: #000;
        }
    </style>
</head>
<body>
<header></header>
<div class="section1"></div>
<div class="section2"></div>
<div class="section3"></div>
<div class="section4"></div>
<footer></footer>
<script>
// 1.创建一个控制器对象
    let controller = new ScrollMagic.Controller();
// 2.创建一个场景对象(一个控制器对象下可以创建多个场景)
    let scene = new ScrollMagic.Scene({
        // 告诉ScrollMagic从什么位置开始当前的场景
        // offset: 100,
        offset: 0,
        // 告诉ScrollMagic当前的场景的有效范围
        duration: 200
    });
    // 告诉ScrollMagic哪一个元素需要固定
    // scene.setPin(".section1");
    scene.setPin(".section1", {pushFollowers: false});
// 3.将场景对象添加到控制器对象（创建 的场景都要添加到控制器对象）
    controller.addScene(scene);
</script>
</body>

2.ScrollMagic场景配置

<script>
    // 官方文档: http://scrollmagic.io/docs/index.html
    // 1.创建一个控制器对象controller
    let controller = new ScrollMagic.Controller();
    // 2.创建一个场景对象scene
    let scene = new ScrollMagic.Scene({
        offset: 0,
        // 告诉ScrollMagic当前的场景从哪一个元素开始
        // triggerElement: "footer",
        // triggerElement: ".section3",
        triggerElement: "header",
        // 告诉ScrollMagic当前的场景从指定元素相对于视口的什么位置开始
        // triggerHook: "onEnter", //进入视口时就触发
        // triggerHook: "onCenter",
        triggerHook: "onLeave",// 离开时触发
        duration: 200,
        reverse: false,
    });
    // 告诉ScrollMagic哪一个元素需要固定
    // scene.setPin(".section1", {pushFollowers: false});
    scene.setPin(".section1");
    // 3.将场景对象添加到控制器对象
    controller.addScene(scene);
</script>

3.ScrollMagic-GSAP动画

<script src="js/ScrollMagic.js"></script>
<script src="js/TweenMax.js"></script>
<script src="js/animation.gsap.js"></script>

<script>
    // 1.创建一个控制器对象controller
    let controller = new ScrollMagic.Controller();
    // 2.创建一个场景对象scene
    let scene = new ScrollMagic.Scene({
        offset: 100,
        duration: 200,
    });
    // 告诉ScrollMagic哪一个元素需要固定
    scene.setPin(".section1");
    /*
    // 创建一个GSAP动画
    let tm = TweenMax.to(".anim", 3, {
        width: 200,
        height: 200
    });
    scene.setTween(tm);
    */
    //场景条件满足后，这个动画就可以执行了。给anim 添加动画，动画效果会随着滚动条的滚动而逐渐变化
    scene.setTween(".anim", 3, {
        width: 200,
        height: 200
    });
    // 3.将场景对象添加到控制器对象
    controller.addScene(scene);
</script>

4.ScrollMagic-Velocity动画

<script src="js/ScrollMagic.js"></script>
<script src="js/velocity.js"></script>
<script src="js/animation.velocity.js"></script>

<script>
    // 1.创建一个控制器对象controller
    let controller = new ScrollMagic.Controller();
    // 2.创建一个场景对象scene
    let scene = new ScrollMagic.Scene({
        offset: 100,
        // 注意点: 如果需要结合Velocity来使用, 那么在创建场景的时候就不能指定有效范围
        // duration: 200,
    });
    // 告诉ScrollMagic哪一个元素需要固定
    scene.setPin(".section1");
    scene.setVelocity(".anim", {
        width: "200px",
        height: "200px"
    }, {
        duration: 3000
    });
    // 3.将场景对象添加到控制器对象
    controller.addScene(scene);
</script>

5.ScrollMagic事件

<script>
    // 1.创建一个控制器对象controller
    let controller = new ScrollMagic.Controller();
    // 2.创建一个场景对象scene
    let scene = new ScrollMagic.Scene({
        offset: 100,
        duration: 200,
    });
    // 告诉ScrollMagic哪一个元素需要固定
    scene.setPin(".section1");
    scene.on("start", function (event) {
        console.log("进入场景");
    });
    scene.on("end", function (event) {
        console.log("离开场景");
    });
    scene.on("progress", function (event) {
        console.log("场景执行过程中" + event.progress);
    });
    // 3.将场景对象添加到控制器对象
    controller.addScene(scene);
</script>

-End