阅读 186

常规运动1

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

注意点

  • 运动模拟物理运动规律
  • 使用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);
    	})
    }
复制代码

总结

以上实现均为根据运动学规律对运动拆解,分解成x,y两个方向进行处理;较复杂的运动拆分成多个简单的运动,对结果进行组合;t为运动唯一外部变量,所有可变变量都与t有关,注意t的使用;本文代码都进行过测试;下一遍会介绍平抛、自由落体、正弦、贝塞尔运动的实现。

关注下面的标签,发现更多相似文章
评论