(三)TweenMax运动效果

2020-04-17 10:42:29

参考地址 TweenMax运动效果

(1)本机知识点

  • 运动效果
    实例化对象.set() 立刻运动到指定地点,不用加时间

(2) 设置其他缓动效果

  • Linear 线性

  • Back 变化

  • Bounce 弹跳变化

  • Circ 圆形变化

  • Cubic 立方体变化

  • Elastic 橡皮圈变化

  • Expo 爆炸变化

  • Quad 变化

  • Quint 变化

  • Sine 正弦变化

(3) set 立刻运动 代码如下

<!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;
    }
    
    #box {
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      left: 0px;
      top: 100px;
    }  </style>
  <div id="box"></div>
  <button id="btn">按钮</button></body><script>
  $(function() {
    var TweenMax = new TimelineMax(); //必须创建对象
    $("#btn").click(() => {
      TweenMax.set("#box", {
        x: 400
      })
    })

  })</script></html>

(4)运动效果

<!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;
    }
    
    #box {
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      left: 0px;
      top: 100px;
    }  </style>
  <div id="box"></div>
  <button id="btn">按钮</button></body><script>
  $(function() {
    var TweenMax = new TimelineMax(); //必须创建对象
    $("#btn").click(() => {
      //   TweenMax.set("#box", {
      //     x: 400
      //   })
      TweenMax.to("#box", 2, {
        x: 400,
        //ease: Back.easeIn,
        //ease: Back.easeOut,
        ease: Back.easeInOut,
      })
    })

  })</script></html>


  • 2019-10-23 10:20:48

    php 去掉 头尾 空格 2种方法

    看似很简单的问题,其实还是有点坑的,首先这里&nbsp;空格转义,不是字符串,直接用trim()是去不掉。

  • 2019-10-23 23:25:22

    PostMapping,GetMapping不固定路径的写法

    PostMapping中的value属性是数组,所以可以定义多个路径,required属性默认是true,不必再写required=true,默认表示该参数是必须要有的,如果写required=false,表示该参数是可选的,可有可无。

  • 2019-10-24 01:14:29

    通过属性搜索商品mysql设计

    属性是可以动态扩展的,问题:属性是搜索条件 问:请展示出 材质为塑料 防水为YES,颜色为绿色的商品详细信息,按照sort_filed排序

  • 2019-10-25 15:18:18

    Vue.use Vue.prototype区别

    1、不是为了vue写的插件(插件内要处理)不支持Vue.use()加载方式 2、非vue官方库不支持new Vue()方式 3、每一个vue组件都是Vue的实例,所以组件内this可以拿到Vue.prototype上添加的属性和方法。

  • 2019-10-25 23:33:45

    php制作漂亮的随机颜色标签云效果

    代码中的array里面的字符串就是各种随机色的编码,大家可以根据自己的需求来配置颜色。 然后input1里面是字体大小的随机代码,也可以自行修改。

  • 2019-10-27 00:23:42

    mac卡住,强制关闭应用

    要正常退出(关闭)Mac 应用,请从菜单栏的应用菜单中选取“退出”,或按下 Command (⌘)-Q。如果应用不退出,请按照以下步骤强制该应用退出。