(四)多个元素运动

本节知识点

  • 多对象运动
    • 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>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • 一念
    我们认为是人，事，物，提着我们走，那么我们终将获得无上智慧； 如果我们总是认为，人，事，物，障碍着我们，那么我们与...
    玄名子阅读 1,180评论 0赞 0
  • vim
    在苹果终端打开vim教程： $ vimtutor 然后回车两次
    springerPrivate阅读 1,787评论 0赞 0
  • 亲情之爱
    在母亲节看了《记我的母亲》这部电影，类似于长篇小说的风格，细致叙述了从1959年到1973年，14年，一段不算短的...
    大河小河与一条魚的传奇阅读 1,769评论 0赞 0
  • 有匪君子，如琢如磨
    好久不见呀~今天的内容其实更多的是我个人看完小说《有匪》后的……嗯……读后感。 进入正题。 后昭建元十七年，山河分...
    LL的面包树阅读 5,589评论 0赞 0
  • 放开手        成全自己
    夜，无尽的夜将人的灵魂一点点吞噬，坐在房间里故意把灯全部关掉，任黑暗肆意蔓延，再蔓延，直到将眼睛，心灵全...
    Amorry阅读 1,724评论 0赞 0

友情链接更多精彩内容