常规运动1

最新推荐文章于 2025-09-12 14:04:02 发布

weixin_33807284

最新推荐文章于 2025-09-12 14:04:02 发布

阅读量131

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5ca057966fb9a05e1a7a960c

模运动规律对运动进行拆解，实现物体的直线、变速、圆周、椭圆、平抛、自由落体、落地弹起等常规运动。

注意点

运动模拟物理运动规律
使用javascript方式操作Dom方式实现运动，与canvas原理相同
实时修改dom的tansform值实现运动
采用定时器setInterval方式，模拟时间的增长
Vo为初速度，Vx水平速度，Vy垂直速度，S为物体位移，g为重力加速度，a为加速度，t为时间,timer为保存定时器的变量
createDom方法为通过实时更新的点坐标x,y绘制小球的运动轨迹

HTML

    <div id="container" class="container">
        <div id="ball"></div>
    </div>
    <script src="index.js"></script>
复制代码

css

    * {
	    margin: 0;
	    padding: 0;
    }
    #ball {
    	width: 10px;
    	height: 10px;
    	background-color: red;
    	border-radius: 50%;
    	/*margin: 200px auto;*/
    	display: inline-block;
    	position: absolute;
    	top: 0;
    }
    .container {
    	text-align: center;
    	height: 300px;
    	border: 1px solid #000;
    	position: relative;
    	width: 80%;
    	margin: auto;
    	margin-top: 100px;
    }
    .points {
    	width: 5px;
    	height: 5px;
    	border-radius: 50%;
    	background-color: blue;
    	display: inline-block;
    	position: absolute;
    	top: 0;
    }
复制代码

运动轨迹绘制

function createDom(x,y){
    var span = document.createElement("span");
    span.className = 'points';
    span.style.transform = 'translate('+ x+'px,'+y+'px)';
    container.appendChild(span);
}
复制代码

匀速直线运动

根据公式 s=Vo*t;
匀速直线运动为一种线性运动，Vo为初速度是一个常量，只需要定时的增加t即可
运动距离s>300运动结束，清除定时器clearInterval(timer)

    var Vo = 10,
        t = 0,
        s = 0,
        timer = null;
    uniformSpeed();
    function uniformSpeed(){
        timer = setInterval(function(){
        	t+=0.1;
        	s = Vo*t;
        	ball.style.transform = 'translate('+ s+'px,0px)';
        	createDom(s,0);
        	if(s>300){
        		clearInterval(timer);
        	}
        })
    }
复制代码

匀变速玉栋

根据公式 s=Vot + (at)t
公式分解为初速度为Vo的匀速运动和一个初速度为0的匀变速运动
a，Vo为常量，s为只与t有关的2次函数
运动距离s>300运动结束，清除定时器clearInterval(timer)
原理与匀速运动类似

    var Vo = 10,
    	a = 1,
    	t = 0,
    	s = 0,
    	timer = null;
    uniformAcceleration();
    function uniformAcceleration(){
    	timer = setInterval(function(){
    		t+=0.05;
    		s = Vo*t + (a*t)*t;
    		ball.style.transform = 'translate('+ s+'px,0px)';
    		createDom(s,0);
    		if(s>300){
    			clearInterval(timer);
    		}
    	})
    }
复制代码

变速曲线运动

与匀速运动方法相似，只需要将运动分解为水平和竖直两个方向分别结算Sx和Sy即可

圆周运动

根据公式 x²+y²=r²
假定坐标原点为0点
分解为x，y两个方向，其中某一点x,y分成水平方向为sin&和cos&
运动距离 angle>2PI 运动结束，清除定时器clearInterval(timer)*
初始位置不为原点的给x，y加上一个偏移量即可，在此不做展开

    var angle = 0,
        r = 100,
        timer = null,
        x,y;
    circleSport();
    function circleSport(){
    	timer = setInterval(function(){
    		angle+=0.01;
    		x = r*Math.sin(angle);
    		y = r*Math.cos(angle);
    		ball.style.transform = 'translate('+x+'px,'+y+'px)';
    		createDom(x,y)
    		if(angle > Math.PI*2) clearInterval(timer);
    	});
    }
复制代码

椭圆运动

根据公式 x²/a²+y²/b²=r²
假定坐标原点为0点
分解为x，y两个方向，为半径为a和半径为b的圆上的坐标，a=b为圆，其他为椭圆
运动距离 angle>2PI 运动结束，清除定时器clearInterval(timer)*
初始位置不为原点的给x，y加上一个偏移量即可，在此不做展开

   var  deg = 0,
        Rx = 50,
        Ry = 100,
        x,y,
        timer = null;
    ellipse();
    function ellipse(){
    	timer = setInterval(function(){
    		deg+=0.01;
    		x = Rx*Math.sin(deg);
    		y = Ry*Math.cos(deg);
    		if(deg>Math.PI*2) return;
    		ball.style.transform = 'translate('+ x+'px,'+y+'px)';
    		createDom(x,y);
    	})
    }
复制代码