JavaScript 中匀速/缓动动画的函数封装

最新推荐文章于 2022-10-23 23:07:58 发布

三七安

最新推荐文章于 2022-10-23 23:07:58 发布

阅读量307

点赞数 1

分类专栏：前端笔记 es6

本文链接：https://blog.csdn.net/weixin_43314255/article/details/114989249

版权

前端同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

es6

9 篇文章 1 订阅

订阅专栏

笔记

4 篇文章 0 订阅

订阅专栏

不废话,直接上.

	//调用动画
   var box1 = document.getElementsByClassName('box1')[0]
    box1.onclick = function () {
      // easemove(this, {
      //   // width:300,
      //   left: 400,
      //   opacity: 50
      // })

        evenmove(this, {
        left: 400,
        //注意这里的opacity值是10的倍数
        opacity: 50
      })
    }

分割线分割线分割线分割线分割线分割线分割线分割线分割线分割线分割线分割线分割线

	// 2021年3月18日19:31:15[缓动多值动画的封装]

    // 运动函数
 
function easemove(ele,obj,callback) {
      clearInterval(ele.timer)
      ele.timer = setInterval(()=>{
        var flag = true
        for (const key in obj) {
          // console.log(key,obj[key]);

          // 如果是透明度
          if (key == 'opacity') {
            var current = parseInt(getStyle(ele,key)*100)
          }else {
            var current = parseInt(getStyle(ele,key))
          }

        // 定义速度
        var speed = obj[key] > current ? Math.ceil((obj[key] - current)/100) : 					Math.floor((obj[key]-current)/100)
        var next = current + speed
        // 下面设置元素的属性值
        if (key == 'zIndex') {
          ele.style[key] = next
        }else if (key == 'opacity'){
          // 透明度具有兼容性
          ele.style[key] = next / 100
          ele.style.filter = 'alpha(opacity=' + next + ')'
        }else{
          ele.style[key] = next + 'px'
        }
        // 每走一次定时器就判断一下到了终点没有
        if (next != obj[key]) {
          // 如果不等那就把控制定时器的变量设成false
          flag = false
        }
        // 走到这里如果变量为真,说明已经走到了终点则在这里停止定时器
        }
          if (flag) {
          clearInterval(ele.timer)
          // 判断是否有回调函数,有的话就进行回调
          callback &&callback()
        }
      },5)
    }

分割线分割线分割线分割线分割线分割线分割线分割线分割线分割线分割线分割线分割线


  // 2021年3月18日19:49:50 [匀速多值属性运动的封装]
    function evenmove(ele, obj, callback) {
      clearInterval(ele.timer)
      ele.timer = setInterval(() => {
        var flag = true
        for (const key in obj) {
          // console.log(key,obj[key]);

          // 如果是透明度
          if (key == 'opacity') {
            var current = parseInt(getStyle(ele, key) * 100)
          } else {
            var current = parseInt(getStyle(ele, key))
          }

          // 定义速度
          // var speed = obj[key] > current ? Math.ceil(obj[key]/10) : -Math.floor(obj[key]/10)
          var speed = obj[key] > current ? 5 : -5
          
          var next = current + speed
          // 下面设置元素的属性值
          if (key == 'zIndex') {
            ele.style[key] = next
          } else if (key == 'opacity') {
            // 透明度具有兼容性
            ele.style[key] = next / 100
            ele.style.filter = 'alpha(opacity=' + next + ')'
          } else {
            ele.style[key] = next + 'px'
          }
          // 每走一次定时器就判断一下到了终点没有
          if (next != obj[key]) {
            // 如果不等那就把控制定时器的变量设成false
            flag = false
          }
          // 走到这里如果变量为真,说明已经走到了终点则在这里停止定时器
        }
        if (flag) {
          clearInterval(ele.timer)
          // 判断是否有回调函数,有的话就进行回调
          callback && callback()
        }
      }, 8)
    }