多属性运动函数

最新推荐文章于 2022-08-10 21:30:58 发布

黄酱！

最新推荐文章于 2022-08-10 21:30:58 发布

阅读量107

点赞数

分类专栏： JS 文章标签：前端 javascript css3

本文链接：https://blog.csdn.net/tianranran/article/details/122527078

版权

JS 专栏收录该内容

91 篇文章 2 订阅

订阅专栏

<style>
    .box, .box2 {
      width: 100px;
      height: 100px;
      position: absolute;
      background-color: #f00;
      top: 50px;
      left: 100px;
      opacity: 0.5;
    }

    .box2 {
      top: 200px;
    }
  </style>
</head>
<body>
  <div class="box">abc</div>
  <div class="box2">box2</div>

  <script src="js/tools.js"></script>
  <script>
    /**
     * 运动函数
     * @param element 待实现运动效果的元素
     * @param options 选项对象，多属性运动时，各属性名及终点值的设置，如：{width: 200, height: 300}
     * @param duration 运动总时长限制
     */
    function animate(element, options, duration) {
      // 先清除定时器
      clearInterval(element.timer)
      // 起始
      const start = {}
      for (const key in options) {
        start[key] = parseFloat(css(element, key))
      }
      console.log(start);
      console.log(options);
      // 运动起始时间
      const startTime = Date.now()
      // 开始运动，在当前 element 元素上绑定 timer 属性
      // 用于记录定时器的 id（添加自定义属性）
      element.timer = setInterval(() => {
        // 获取到回调函数执行这一刻的时间
        const currentTime = Date.now()
        // 计算当前时间与运动起始时间差
        const elapsed = Math.min(currentTime - startTime, duration)
        // 各运动属性计算当前走这一步的计算值
        for (const key in options) {
          // 按照公式，计算
          const result = elapsed * (options[key] - start[key]) / duration + start[key]
          // 设置元素CSS属性值
          element.style[key] = result + (key === 'opacity' ? '' : 'px')
        }
        // 判断是否到达终点，到达终点，停止定时器
        if (elapsed === duration) {
          clearInterval(element.timer)
        }
      }, 1000 / 60)
    }

    $('.box').onmouseover = function() {
      animate(this, {
        width: 400,
        height: 300,
        left: 500
      }, 1000)
    }

完善

<style>
    .box {
      width: 100px;
      height: 100px;
      position: absolute;
      background-color: #f00;
      top: 50px;
      left: 100px;
    }
  </style>
</head>
<body>
  <button class="btn1">水平</button>
  <button class="btn2">宽度高度</button>
  <button class="btn3">宽度高度不透明度</button>
  <div class="box"></div>

  <script src="js/tools.js"></script>
  <script>
    /**
     * 运动函数
     * @param element 待实现运动效果的元素
     * @param options 选项对象，多属性运动时，各属性名及终点值的设置，如：{width: 200, height: 300}
     * @param duration 运动总时长限制
     * @param fn 是一个可选函数，该函数会在运动结束后被调用执行
     */
    function animate(element, options, duration, fn) {
      // 先清除定时器
      clearInterval(element.timer)
      // 起始
      const start = {}
      for (const key in options) {
        start[key] = parseFloat(css(element, key))
      }

      // 运动起始时间
      const startTime = Date.now()
      // 开始运动，在当前 element 元素上绑定 timer 属性
      // 用于记录定时器的 id（添加自定义属性）
      element.timer = setInterval(() => {
        // 获取到回调函数执行这一刻的时间
        const currentTime = Date.now()
        // 计算当前时间与运动起始时间差
        const elapsed = Math.min(currentTime - startTime, duration)
        // 各运动属性计算当前走这一步的计算值
        for (const key in options) {
          // 按照公式，计算
          const result = elapsed * (options[key] - start[key]) / duration + start[key]
          // 设置元素CSS属性值
          element.style[key] = result + (key === 'opacity' ? '' : 'px')
        }
        // 判断是否到达终点，到达终点，停止定时器
        if (elapsed === duration) {
          clearInterval(element.timer)
          // 如果有运动结束后执行的函数，则调用执行
          fn && fn()
        }
      }, 1000 / 60)
    }
  </script>

  <script>
    $('.btn1').onclick = function() {
      animate($('.box'), {left: 300}, 3000)
    }

    $('.btn2').onclick = function() {
      animate($('.box'), {width: 300, height:600}, 3000)
    }

    $('.btn3').onclick = function() {
      animate(
        $('.box'), // element
        {width: 300, height:600, opacity: 0}, // options
        3000, // duration
        function() { // fn
          $('.box').style.display = 'none'
        }
      )
    }
  </script>

黄酱！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多属性运动函数

<style> .box, .box2 { width: 100px; height: 100px; position: absolute; background-color: #f00; top: 50px; left: 100px; opacity: 0.5; } .box2 { top: 200px; } </style></head&g
复制链接

扫一扫

专栏目录