匀速/缓冲
    匀速运动

    1. <head>
    2.     <meta charset="UTF-8">
    3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    4.     <title>Document</title>
    5.     <style>
    6.         .move{
    7.             width: 100px;
    8.             height: 100px;
    9.             position: absolute;
    10.             background: red;
    12.         }
    13.     </style>
    14. </head>
    15. <body>
    16.     <div class="move"></div>
    17.     <script>
    18.         var div = document.getElementsByClassName('move')[0];
    19.         // 匀速运动
    20.         function move (dom,target){
    21.             var time = null;
    22.             clearInterval(time);
    23.             var iSpeed = target - dom.offsetLeft > 0 ? 7 : -7;
    24.             time = setInterval(() => {
    25.                 if(Math.abs(target - dom.offsetLeft) < Math.abs(iSpeed)){
    26.                     clearInterval(time)
    27.                     dom.style.left = target + 'px';
    28.                 }else{
    29.                     dom.style.left = dom.offsetLeft + iSpeed + 'px'
    30.                 }
    32.             }, 30);    
    33.         }
    34.         move(div,500)
    35.     </script>
    36. </body>

    缓冲运动

    1.         // 物体的速度，距离目标点越近，就越小，当到达目标点时，速度减小为0
    2.                 // 缓冲运动的原理：速度由距离决定，速度=（目标值-当前值）/缩放比例
    3.         function startMove (dom ,target){
    4.             var timer = null,iSpeed = null;
    5.             clearInterval(timer);
    6.             timer = setInterval(() => {
    7.                 iSpeed = (target - dom.offsetLeft) / 7;
    8.                 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); //ceil 向上一位取整
    9.                 if(dom.offsetLeft == target){
    10.                     clearInterval(timer);
    11.                 }else{
    12.                     dom.style.left = dom.offsetLeft + iSpeed + 'px';
    13.                 }
    15.             }, (30));
    16.         }

    透明度

    1.         var div = document.getElementsByClassName('move')[0];
    2.                 var timer = null;
    3.         function startMove (dom, target) {
    4.             clearInterval(timer);
    5.             var iSpeed = null, iCur = null;
    6.             timer = setInterval(function () {
    7.                 iCur = parseFloat( getStyle(dom, 'opacity') ) * 100;
    8.                 iSpeed = (target - iCur) / 7;
    9.                 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    11.                 if (iCur == target) {
    12.                     console.log(1)
    13.                     clearInterval(timer);
    14.                 }else {
    15.                     // 0 - 1    iCur * 100 target * 100 iSpeed * 100  iCur + iSpeed 0 - 100 /  100
    16.                     dom.style.opacity = (iCur + iSpeed) / 100;
    17.                 }
    18.             }, 30)
    19.         }
    20.         div.onclick = function(){
    21.             startMove(this,50)
    22.         }

    多物体不同值运动

    1.         function startMove(dom , attr, target){
    2.             var timer = null,iSpeed = null,iCur = null;
    3.             clearInterval(timer);
    4.             dom.timer = setInterval(function(){
    5.                 if(attr == 'opacity'){
    6.                     iCur = parseFloat(getStyle(dom,attr))*100
    7.                 }else{
    8.                     iCur = parseInt(getStyle(dom,attr))
    9.                 }
    10.                 iSpeed = (target - iCur) /7 ;
    11.                 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    12.                 if(iCur == target){
    13.                     clearInterval(dom.timer);
    14.                 }
    15.                 if(attr == 'opacity'){
    16.                     dom.style.opacity = (iSpeed+iCur)/100;
    17.                 }else{
    18.                     dom.style[attr]=iCur+iSpeed +'px'
    19.                 }
    20.             })
    21.         }
    23.         function getStyle(dom,attr){
    24.             if(window.getComputedStyle){
    25.                 return window.getComputedStyle(dom,null)[attr];
    26.             }else{
    27.                 return dom.currentStyle[attr];
    28.             }
    29.         }
    30.         div[0].onclick = function(){
    31.             startMove(div[0],'width',500)   
    32.         };
    33.         div[1].onclick = function(){
    34.             startMove(div[1],'height',500)   
    35.         };
    36.         div[2].onclick = function(){
    37.             startMove(div[2],'opacity',50)  
    38.         };

    多物体多值运动+回调

    1.    <div id='topDiv'></div>
    2.     <div id="bottomDiv"></div>
    3.     <script>
    4.         // js div
    5.         // width -> 100 400   height 100 400   left 0 200  top 200 300 opacity 1 0.5
    6.         // {width: 400, height: 400, left: 200, top: 300, opacity: 50}
    8.         var oTopDiv = document.getElementById('topDiv');
    9.         var oBottomDiv = document.getElementById('bottomDiv');
    10.         oTopDiv.onclick = function () {
    11.             startMove(this, {width: 400, height: 400, left: 200, top: 300, opacity: 50}, function () {
    12.                 startMove(oBottomDiv, {width: 400, height: 400, left: 200, top: 300, opacity: 50}, function () {
    13.                     alert('over');
    14.                 })
    15.             })
    16.         }
    17.         function getStyle (dom, attr) {
    18.             if (window.getComputedStyle) {
    19.                 return window.getComputedStyle(dom, null)[attr];
    20.             }else {
    21.                 return dom.currentStyle[attr];
    22.             }
    23.         }
    25.         function startMove (dom, attrObj, callback) {
    26.             clearInterval(dom.timer);
    27.             var iSpeed = null, iCur = null;
    28.             dom.timer = setInterval(function () {
    29.                 var bStop = true;
    30.                 for (var attr in attrObj) {
    31.                     // 'width' 'height' 
    32.                     if (attr == 'opacity') {
    33.                         iCur = parseFloat( getStyle(dom, attr) ) * 100;
    34.                     }else {
    35.                         iCur = parseInt( getStyle(dom, attr) );
    36.                     }
    37.                     iSpeed = (attrObj[attr] - iCur) / 7;
    38.                     iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    39.                     if (attr == 'opacity') {
    40.                        dom.style.opacity = (iCur + iSpeed) / 100; 
    41.                     }else {
    42.                        dom.style[attr] = iCur + iSpeed + 'px';
    43.                     }
    44.                     if (iCur != attrObj[attr]) {
    45.                         bStop = false;
    46.                     }
    47.                 }
    48.                 if (bStop) {
    49.                     clearInterval(dom.timer);
    50.                     typeof callback == 'function' && callback(); // 此处&& 当前面为true就会执行回调函数 
    51.                 }
    52.             }, 30);
    53.         }
    54.       </script>