Js模拟重力场Js动效

Posted 师兄白泽

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Js模拟重力场Js动效相关的知识,希望对你有一定的参考价值。

Js模拟重力场【Js动效】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟重力场</title>
    <style>
    	/*小球的样式*/
        .swapper
            width: 100px;
            height: 100px;
            position: absolute;
            background: #008c8c;
            border-radius: 50%;
        
    </style>
</head>
<body>
	<!--小球-->
    <div class="swapper">
    </div>
    
    <script>
    	// 获取div
        var oDiv = document.getElementsByClassName('swapper')[0];
        // 定时器
        var timer = null;
        // js为div添加点击事件
        oDiv.onclick = function()
            console.log("inter click");
            startMove(this);
        
        // js动画
        function startMove(dom)
            clearInterval(dom.timer);
            // 模拟x轴运动速度
            var iSpeedx = 6;
            // 模拟y轴运动速度
            var iSpeedy = 8;
            // 模拟重力加速度
            var g = 3
            // 设置定时器
            dom.timer = setInterval(function()
            	// v = v0 + at; 速度逐渐增加
                iSpeedy += g;
                // 顶部和底部的 speed 
                var newTop = dom.offsetTop + iSpeedy;
                var newLeft = dom.offsetLeft + iSpeedx;
                
                // 如果当前的y值位置 >= 文档高度 - dom高度(判断小球是否超出文档)
                if(newTop >= document.documentElement.clientHeight - dom.clientHeight)
                	// speedy 方向改变
                    iSpeedy *= -1;
                    // speedy 与 speedx 速度减少
                    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(iSpeedy == 0 && iSpeedx == 0)
                	// 清除定时器
                    clearInterval(dom.timer);
                    console.log("timer clear all");
                
                // 改变样式
                dom.style.top = newTop + 'px';
                dom.style.left = newLeft + 'px';
            ,30);
            console.log("timer end");
        
    </script>
</body>
</html>

以上是关于Js模拟重力场Js动效的主要内容,如果未能解决你的问题,请参考以下文章

Js模拟重力场Js动效

Js模拟重力场Js动效

原生js+css实现重力模拟弹跳系统的登录页面

[突发奇想的JS小案例] 2 重力模拟

[突发奇想的JS小案例] 2 重力模拟

JS动效--双色球