本节知识点

多对象运动
- staggerTo
  -- 高级技巧cycle的使用
  -- 贝赛尔曲线
- staggerFrom
回调函数
- onStart
- onUpdate
- onComplete
3D效果
- 3D效果的产生方式
  (1) TweenMax transformPerspective
  (2) CSS Perspective
- 变换原点
  transformOrigin

(一) 链式运动

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="js/jquery.min.js"></script>
  <script src="js/TweenMax.min.js"></script>
</head>

<body>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    
    div {
      width: 100px;
      height: 100px;
      background: red;
      margin-bottom: 30px;
    }
  </style>
  <div id="box"></div>
  <div id="box2"></div>
  <button id="btn">按钮</button>
</body>
<script>
  $(function() {
    var TweenMax = new TimelineMax(); //必须创建对象
    $("#btn").click(() => {
      TweenMax.to("#box", 1, {
          x: 400,
        }).to("#box2", 1, {
          x: 400,
        }, "-=1")
        //第4个参数表示延迟多少秒执行
        //   TweenMax.to("#box2", 1, {
        //     x: 400,
        //   },3)

    })

  })
</script>

</html>

(二) 多个元素链式运动

staggerTo staggerFrom
(1)多个元素运动到共同的位置
设置延迟时间了那表示每个DIV延迟执行的时间

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="js/jquery.min.js"></script>
  <script src="js/TweenMax.min.js"></script>
</head>

<body>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    
    p {
      width: 100px;
      height: 100px;
      background: red;
      margin-bottom: 30px;
    }
  </style>
  <div id="divall">
    <p id="box"></p>
    <p id="box2"></p>
    <p id="box3"></p>
  </div>
  <button id="btn">按钮</button>
</body>
<script>
  $(function() {
    var TweenMax = new TimelineMax(); //必须创建对象
    $("#btn").click(() => {
      TweenMax.staggerTo("#divall p", 1, {
          x: 400,
        }, 1)
        //第4个参数表示延迟多少秒执行
        //   TweenMax.to("#box2", 1, {
        //     x: 400,
        //   },3)

    })

  })
</script>
</html>

(2)多个元素运动到不同的位置

cycle属性一个对象。里面的属性就是数组

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="js/jquery.min.js"></script>
  <script src="js/TweenMax.min.js"></script>
</head>

<body>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    
    p {
      width: 100px;
      height: 100px;
      background: red;
      margin-bottom: 30px;
    }
  </style>
  <div id="divall">
    <p id="box"></p>
    <p id="box2"></p>
    <p id="box3"></p>
  </div>

  <button id="btn">按钮</button>
</body>
<script>
  $(function() {
    var TweenMax = new TimelineMax(); //必须创建对象
    $("#btn").click(() => {
      TweenMax.staggerTo("#divall p", 1, {
          cycle: {
            x: [100, 400, 500]
          }
        }, 1)
        //第4个参数表示延迟多少秒执行
        //   TweenMax.to("#box2", 1, {
        //     x: 400,
        //   },3)
    })
  })
</script>
</html>

也可以利用回调函数

<script>
  $(function() {
    var TweenMax = new TimelineMax(); //必须创建对象
    $("#btn").click(() => {
      TweenMax.staggerTo("#divall p", 1, {
          cycle: {
            x: function(i) {
              return i * 100
            }
          }
        }, 1)
        //第4个参数表示延迟多少秒执行
        //   TweenMax.to("#box2", 1, {
        //     x: 400,
        //   },3)
    })
  })
</script>

(三) 回调函数

onStart
onUpdate
onComplete

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="js/jquery.min.js"></script>
  <script src="js/TweenMax.min.js"></script>
</head>

<body>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    
    p {
      width: 100px;
      height: 100px;
      background: red;
      margin-bottom: 30px;
    }
  </style>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>

  <button id="btn">按钮</button>
</body>
<script>
  $(function() {
    var TweenMax = new TimelineMax(); //必须创建对象
    $("#btn").click(() => {
      TweenMax.staggerTo("p", 1, {
        x: 400,
        onStart: function() {
          console.log("开始运动")
        },
        onUpdate: function() {
          console.log("运动中开始")
        },
        onComplete: function(i) {
          console.log(i);
          console.log("运动结束了");
          console.log(this.target); //谁完成就是谁
          this.target.style.background = "green"
        }
      }, 1)
    })

  })
</script>
</html>

(四) 3D效果

set ,transformPerspective,transformOrigin

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="js/jquery.min.js"></script>
  <script src="js/TweenMax.min.js"></script>
</head>

<body>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }    
    p {
      width: 100px;
      height: 100px;
      background: red;
      margin-bottom: 30px;
    }
  </style>
  <p></p>

  <button id="btn">按钮</button>
</body>
<script>
  $(function() {
    var TweenMax = new TimelineMax(); //必须创建对象

    $("#btn").click(() => {
      TweenMax.set("p", {
        transformPerspective: 800,
        transformOrigin: "right"
      })
      TweenMax.staggerTo("p", 1, {
        rotationY: 145,
      }, 1)


    })

  })
</script>

</html>