js运动

最新推荐文章于 2024-09-18 13:37:07 发布

九依

最新推荐文章于 2024-09-18 13:37:07 发布

阅读量122

点赞数

分类专栏：小白文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/Yzhoun/article/details/106991025

版权

小白专栏收录该内容

39 篇文章

订阅专栏

本文深入探讨了使用JavaScript实现的不同类型的运动动画，包括加速运动、弹性运动及模拟重力场运动。通过具体代码示例，详细解析了如何控制元素的位置、速度和加速度，以创建平滑且逼真的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

加速运动

var timer = null;
        var oDiv = document.getElementsByTagName('div')[0];
        oDiv.onclick = function (){
            setaMove(this)
        }
        function setaMove (dom){
            clearInterval(timer);
            var a = -1;
            var iSpeed = 20;
            timer = setInterval(function(){
                iSpeed = iSpeed + a;
                oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px'
            },30)
        }

弹性运动

        function setaMove (dom, targan){
            clearInterval(timer);
            var a = 3;
            var iSpeed = 0;
            var u = 0.8
            timer = setInterval(function(){
                a = (targan - dom.offsetLeft) / 5;
                iSpeed += a;
                iSpeed *= 0.8;
                if(Math.abs(iSpeed) < 1 && Math.abs(targan - dom.offsetLeft) < 1){
                    clearInterval(timer);
                    dom.style.left = targan +'px'
                }else{
                    dom.style.left = dom.offsetLeft + iSpeed +'px';
                }
               
            },30)

           
        }

模拟重力场运动

 function startMove(dom){
            clearInterval(dom.timer);
            var iSpeedX = 6;
            var iSpeedY = 8;
            var g = 3;
            dom.timer = setInterval(function (){
                iSpeedY += g;
               var newTop = dom.offsetTop + iSpeedY;
               var newLeft = dom.offsetLeft + iSpeedX;
               if(newTop >= document.documentElement.clientHeight - dom.clientHeight){
                   iSpeedY *= -1;
                   iSpeedY *= 0.8;
                   iSpeedX *= 0.8;
                   newTop = document.documentElement.clientHeight - dom.clientHeight;
               }
               if(newTop <= 0){
                   iSpeedY *= -1;
                   iSpeedY *= 0.8;
                   iSpeedX *= 0.8;
                   newTop = 0;         
               }
               if(newLeft >= document.documentElement.clientWidth - dom.clientWidth){
                   iSpeedX *= -1;
                   iSpeedY *= 0.8;
                   iSpeedX *= 0.8;
                   newLeft = document.documentElement.clientWidth - dom.clientWidth;    
               }
               if(newLeft <= 0){
                   iSpeedX *= -1;
                   iSpeedY *= 0.8;
                   iSpeedX *= 0.8;
                   newLeft = 0;     
               }
               if(Math.abs(iSpeedX) < 1){
                   iSpeedX = 0;
               }
               if(Math.abs(iSpeedY) < 1){
                   iSpeedY = 0;
                }
                if(iSpeedX == 0 && iSpeedY == 0 && newTop == document.documentElement.clientHeight){
                    clearInterval(dom.timer);
                    console.log('over')
                }else{
                    
                    dom.style.top = newTop + 'px';
                    dom.style.left = newLeft + 'px';
                }
            },20)
        }

拖拽模拟重力场

  var oDiv = document.getElementsByClassName('dome');
        var lastX = 0;
        var lastY = 0;
        var iSpeedX = 0;
        var iSpeedY = 0;
        oDiv[0].onmousedown = function(e){
            clearInterval(this.timer)
            var event = event || e;
            var disX = event.clientX - this.offsetLeft;
            var disY = event.clientY - this.offsetTop;
            var self = this;
            document.onmousemove = function (e){
                var event = event || e;
                var newLeft = event.clientX - disX;
                var newTop = event.clientY - disY;
                iSpeedX = newLeft - lastX;
                iSpeedY = newTop -lastY;
                lastX = newLeft;
                lastY = newTop;
                var oSpan = document.createElement('span');
                oSpan.style.position = "absolute"
                oSpan.style.top = newTop + 'px';
                oSpan.style.left = newLeft +'px';
                oSpan.style.width = '5px';
                oSpan.style.height = '5px';
                oSpan.style.borderRadius = '50%';
                oSpan.style.backgroundColor = 'black';
                document.body.appendChild(oSpan)
                self.style.left = newLeft + 'px';
                self.style.top = newTop + 'px'; 
            }
            document.onmouseup = function(){
                document.onmouseup = null;
                document.onmousemove = null;
                startMove(oDiv[0], iSpeedX, iSpeedY)
            }
        }
        timer = null;

        function startMove(dom, iSpeedX, iSpeedY){
            clearInterval(dom.timer);
            var g = 3;
            dom.timer = setInterval(function (){
                iSpeedY += g;
               var newTop = dom.offsetTop + iSpeedY;
               var newLeft = dom.offsetLeft + iSpeedX;
               if(newTop >= document.documentElement.clientHeight - dom.clientHeight){
                   iSpeedY *= -1;
                   iSpeedY *= 0.8;
                   iSpeedX *= 0.8;
                   newTop = document.documentElement.clientHeight - dom.clientHeight;
               }
               if(newTop <= 0){
                   iSpeedY *= -1;
                   iSpeedY *= 0.8;
                   iSpeedX *= 0.8;
                   newTop = 0;         
               }
               if(newLeft >= document.documentElement.clientWidth - dom.clientWidth){
                   iSpeedX *= -1;
                   iSpeedY *= 0.8;
                   iSpeedX *= 0.8;
                   newLeft = document.documentElement.clientWidth - dom.clientWidth;    
               }
               if(newLeft <= 0){
                   iSpeedX *= -1;
                   iSpeedY *= 0.8;
                   iSpeedX *= 0.8;
                   newLeft = 0;     
               }
               if(Math.abs(iSpeedX) < 1){
                   iSpeedX = 0;
               }
               if(Math.abs(iSpeedY) < 1){
                   iSpeedY = 0;
                }
                if(iSpeedX == 0 && iSpeedY == 0 && newTop == document.documentElement.clientHeight){
                    clearInterval(dom.timer);
                    console.log('over')
                }else{   
                    dom.style.top = newTop + 'px';
                    dom.style.left = newLeft + 'px';
                }
            },20)
        }