加速运动、减速运动、弹性运动和碰撞运动JavaScript实现

素颜马尾好姑娘i 2022-05-27 12:20 242阅读 0赞

**html代码**

<div id="box"></div>

**css代码**

* {
                margin: 0;
                padding: 0;
            }
    
            #box {
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
            }

**JS代码**

加速运动

var oBox = document.getElementById("box");
    
        document.onclick = function () {
            var l = 0;
            setInterval(function () {
                l++;
                oBox.style.left = oBox.offsetLeft + l + 'px';
            }, 30)
        }

减速运动

var oBox = document.getElementById("box");
    
        document.onclick = function () {
            var l = 30;
            setInterval(function () {
                l--;
                oBox.style.left = oBox.offsetLeft + l + 'px';
            }, 30)
        }

弹性运动

var oBox = document.getElementById("box");
        var speed = 0;
    
        document.onclick = function () {
            move(oBox, 300)
        };
    
        function move(obj, iTarget) {
            setInterval(function () {
                speed += (iTarget - obj.offsetLeft) / 2;
                //摩擦力
                speed *= 0.8;
    
                oBox.style.left = oBox.offsetLeft + speed + 'px';
            }, 30)
        }

碰撞运动

var timer = null;
        var oBox = document.getElementById("box");
        var disX = 10;
        var disY = 8;
        var iw = document.documentElement.clientWidth - oBox.offsetWidth;
        var ih = document.documentElement.clientHeight - oBox.offsetHeight;
    
        document.onclick = function () {
            timer = setInterval(function () {
                disY += 5;
                var l = oBox.offsetLeft + disX;
                var t = oBox.offsetTop + disY;
    
                if (l >= iw) {
                    disX *= -0.8;
                    l = iw;
                }
    
                if (l <= 0) {
                    disX *= -0.8;
                    l = 0;
                }
    
                if (t >= ih) {
                    disY *= -0.8;
                    disX *= 0.8;
                    t = ih;
                }
    
                if (t <= 0) {
                    disY *= -0.8;
                    disX *= 0.8;
                    t = 0;
                }
    
                if (Math.abs(disX) <= 1) {
                    disX = 0;
                }
    
                //纯属碰巧
                if (Math.abs(disY) <= 2) {
                    disY = 0;
                }
    
                if (disX == 0 && disY == 0) {
                    clearInterval(timer);
                }
                console.log(disY, disX)
                oBox.style.left = l + 'px';
                oBox.style.top = t + 'px';
            }, 30)
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，242人围观）

还没有评论，来说两句吧...

相关阅读

相关 48、JavaScript的运动----无缝运动的实现

1、JavaScript的运动----无缝运动的实现 2、测试代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

蔚落/ 2022年09月22日 04:58/ 0 赞/ 148 阅读

相关 41、JavaScript的运动----运动的终止条件

1、运动终止条件 • 匀速运动：距离足够近 • 缓冲运动：两点重合 (具体上面的一个博客的内容) 2、匀速运动终止的条件 <!DOCTY

ゝ一世哀愁。/ 2022年09月21日 13:09/ 0 赞/ 166 阅读

相关 40、JavaScript的运动----缓冲运动

1、缓冲运动 • 逐渐变慢，最后停止 • 距离越远速度越大 – 速度由距离决定 – 速度 = (目标值 \- 当前值 ) / 缩放系数

曾经终败给现在/ 2022年09月21日 13:07/ 0 赞/ 201 阅读

相关 JavaScript实现的抛物线运动效果

原文：[http://www.css88.com/archives/5355][http_www.css88.com_archives_5355] 作者的主要实现代码：

ゝ一世哀愁。/ 2022年08月06日 14:07/ 0 赞/ 204 阅读

相关 Javascript运动概念2——多物体运动框架

1、多个物体同时运动例子：多个div，鼠标移入变宽 Bug——单定时器，存在问题解决办法：将每个div一个定时器 2、多物体运动运动框架（1）

古城微笑少年丶/ 2022年07月15日 12:08/ 0 赞/ 185 阅读

相关 Javascript运动概念1——缓冲运动、匀速运动、运动框架

概念—— A、运动基础：（1）让div运动起来（2）速度——物体运动的快慢（3）运动中的Bug a、不会停止 b、速度取某些值会无法停止 c、到达位置后再点

以你之姓@/ 2022年07月15日 12:07/ 0 赞/ 219 阅读

相关链式运动JavaScript实现

html代码 <div></div> <div></div> <div></div> <div>你这一辈子有没有为别人拼过命</div>

傷城~/ 2022年05月27日 12:30/ 0 赞/ 172 阅读

相关抛物线运动JavaScript实现

html代码 <div id="goods"></div> css代码 { margin: 0;

柔光的暖阳◎/ 2022年05月27日 12:29/ 0 赞/ 228 阅读

相关加速运动、减速运动、弹性运动和碰撞运动JavaScript实现

html代码 <div id="box"></div> css代码 { margin: 0;

素颜马尾好姑娘i/ 2022年05月27日 12:20/ 0 赞/ 243 阅读

相关弹性运动公式

function startMove(dom对象,r1(初始位置/距离/大小),r2/(结束位置/距离/大小)) { var n

爱被打了一巴掌/ 2021年07月25日 01:31/ 0 赞/ 370 阅读