javascript 运动函数

Posted 2021-05-04

/**
 * 匀速运动
 * @param element
 * @param target
 * @param step
 */
function startMoveRapid(element, target, step) {
    if (element.timer) {
        clearInterval(element.timer)
    }
    element.timer = setInterval(function () {
        var leader = element.offsetLeft;
        if (leader > target) {
            step = -Math.abs(step);
        }
        var sun = Math.abs(target - leader)
        if (sun >= Math.abs(step)) {
            leader += step;
            element.style.left = leader + "px";
        } else {
            clearInterval(element.timer);
            element.style.left = target + "px";
        }
    }, 15)
}



/**
 * 缓冲运动-链式/同时
 * @param obj
 * @param json
 * @param fn
 */
function startMove(obj, json, fn) {

    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var flag = true;
        for (var attr in json) {
            var target = json[attr];

            if (attr == "opacity") {
                var icur = Math.round(parseFloat(getStyle(obj, attr)) * 100) || 0;
            } else {
                var icur = parseInt(getStyle(obj, attr)) || 0;
            }

            var speed = (target - icur) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
            if (icur != target) {
                flag = false;
            }
            if (attr == "opacity") {
                obj.style.opacity = (icur + speed) / 100
                obj.style.filter = "alpha(opacity=" + (icur + speed) + ")"
            } else if (attr == "zIndex") {
                obj.style.zIndex = json[zIndex];
            } else {
                obj.style[attr] = icur + speed + "px"
            }
        }
        if (flag) {
            //执行回调函数
            clearInterval(obj.timer);
            if (fn) {
                fn();
            }
        }
    }, 15)
}



/**
 * 单属性弹性运动
 * @param obj
 * @param attr
 * @param target
 * @param fn
 */
function startTMove(obj, attr, target, fn) {
    clearInterval(obj.timer);
    var speed = 0;
    obj.timer = setInterval(function () {
        var leader = parseInt(getStyle(obj, attr));

        speed += (target - leader)/20 ;
        speed *= 0.8;

        if (Math.abs(speed) <= 1 && Math.abs(target - leader) <= 1) {
            clearInterval(obj.timer)
            speed = 0;
            obj.style[attr] = target + "px";
            fn && fn();
        } else {
            obj.style[attr] = leader + speed + "px";
        }

    }, 15)
}



// 碰撞运动
window.onload = function(){
   var oDiv = document.getElementById('div1');

   var iSpeedX = 10;
   var iSpeedY = 10;

   startMove();
   function startMove(){
      setInterval(function(){
         var L = oDiv.offsetLeft + iSpeedX;
         var T = oDiv.offsetTop + iSpeedY;
         
         if(T>document.documentElement.clientHeight - oDiv.offsetHeight){
            T = document.documentElement.clientHeight - oDiv.offsetHeight;
            iSpeedY *= -1;
         }
         else if(T<0){
            T = 0;
            iSpeedY *= -1;
         }

         if(L>document.documentElement.clientWidth - oDiv.offsetWidth){
            L = document.documentElement.clientWidth - oDiv.offsetWidth;
            iSpeedX *= -1;
         }
         else if(L<0){
            L = 0;
            iSpeedX *= -1;
         }

         oDiv.style.left = L + 'px';
         oDiv.style.top = T + 'px';
      },30);
   }

};



// 自由落体运动

window.onload = function(){
   var oInput = document.getElementById('input1');
   var oDiv = document.getElementById('div1');
   
   var timer = null;
   var iSpeed = 0;
   
   oInput.onclick = function(){
      startMove();
   };
   
   function startMove(){
      clearInterval(timer);
      timer = setInterval(function(){
         
         iSpeed += 3;
         
         var T = oDiv.offsetTop + iSpeed;
         
         if(T > document.documentElement.clientHeight - oDiv.offsetHeight){
            T = document.documentElement.clientHeight - oDiv.offsetHeight;
            iSpeed *= -1;
           
             iSpeed *= 0.75;
           
          }
         
         oDiv.style.top = T + 'px';
         
      },30);
   }
   
};


// 抛物线运动
window.onload = function(){
   var oInput = document.getElementById('input1');
   var oDiv = document.getElementById('div1');
   
   var timer = null;
   var iSpeed = -40;
   var iSpeedX = 10;
   
   oInput.onclick = function(){
      startMove();
   };
   
   function startMove(){
      clearInterval(timer);
      timer = setInterval(function(){ 
         iSpeed += 3; 
         var T = oDiv.offsetTop + iSpeed; 
         if(T > document.documentElement.clientHeight - oDiv.offsetHeight){
            T = document.documentElement.clientHeight - oDiv.offsetHeight;
            iSpeed *= -1; 
            iSpeed *= 0.75; 
            iSpeedX *= 0.75; 
         }
         
         oDiv.style.top = T + 'px'; 
         oDiv.style.left = oDiv.offsetLeft + iSpeedX + 'px';
         
      },30);
   } 
};



// 拖拽运动
window.onload = function () {
    var oDiv = document.getElementById('div1');
    //记录鼠标和盒子边缘距离
    var disX = 0;
    var disY = 0;
    //定义上一次鼠标的XY轴,初始为0
    var prevX = 0;
    var prevY = 0;
    //定义最后两次触发move事件的XY轴的距离差 用作速度
    var iSpeedX = 0;
    var iSpeedY = 0;

    var timer = null;

    //鼠标按下事件
    oDiv.onmousedown = function (ev) {
        var ev = ev || window.event;
        //计算鼠标点击位置和边框的距离
        disX = ev.clientX - oDiv.offsetLeft;
        disY = ev.clientY - oDiv.offsetTop;
        //初始化  将点击事件记录的鼠标XY轴位置，赋值给prev
        prevX = ev.clientX;
        prevY = ev.clientY;

        document.onmousemove = function (ev) {
            var ev = ev || window.event;
            //鼠标移动事件触发，改变盒子的位置
            oDiv.style.left = ev.clientX - disX + 'px';
            oDiv.style.top = ev.clientY - disY + 'px';
            //记录 此次最后两次XY差（初始化 记录第一次触发move时和点击时 XY的差值）
            iSpeedX = ev.clientX - prevX;
            iSpeedY = ev.clientY - prevY;
            //将此次记录的鼠标位置，赋值给prev，用作下一次触发的上一次位置
            prevX = ev.clientX;
            prevY = ev.clientY;

        };
        document.onmouseup = function () {
            //鼠标抬起，清空时间，让盒子做运动，取消点击事件的默认行为
            document.onmousemove = null;
            document.onmouseup = null;
            startMove();
        };
        return false;
    };

    function startMove() {
      clearInterval(timer);
      timer = setInterval(function () {
          //Y轴速度 给一个正的加速度，相当于重力加速度，做自由落体运动
          iSpeedY += 3;
          //每一次定时器触发，记录Left和Top值
          var L = oDiv.offsetLeft + iSpeedX;
          var T = oDiv.offsetTop + iSpeedY;
          //如果Top值，大于可视高-盒子自身高度，说明到边界，需要将其搬回到边界，然后反向运动
          if (T > document.documentElement.clientHeight - oDiv.offsetHeight) {
              T = document.documentElement.clientHeight - oDiv.offsetHeight;
              iSpeedY *= -1;
              //速度衰减  相当于摩擦系数 ，
              //由于和最低边框碰撞几率很大，和左右碰撞几率小，
              // 所以和最低边框碰撞时，也让X轴速度衰减，从而达到优秀的效果
              iSpeedY *= 0.75;
              iSpeedX *= 0.75;
          }
          //到达最上边界，反向
          else if (T < 0) {
              T = 0;
              iSpeedY *= -1;
              iSpeedY *= 0.75;
          }

          if (L > document.documentElement.clientWidth - oDiv.offsetWidth) {
              L = document.documentElement.clientWidth - oDiv.offsetWidth;
              iSpeedX *= -1;
              iSpeedX *= 0.75;
          }
          else if (L < 0) {
              L = 0;
              iSpeedX *= -1;
              iSpeedX *= 0.75;
          }

          oDiv.style.left = L + 'px';
          oDiv.style.top = T + 'px';


          var endSpeedX = Math.abs(iSpeedX);
          var endSpeedY = Math.abs(iSpeedY);
          var endTop = (document.documentElement.clientHeight - oDiv.offsetHeight) - 2

          //console.log(endSpeedX)
          //console.log(endSpeedY)
          //console.log(endTop)

          if (endSpeedX <= 2 && endSpeedY <= 2 && T >= endTop) {
              clearInterval(timer)
          }
      }, 30);
    }
};