常规运动1

女爷i 2022-01-20 08:25 227阅读 0赞

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

### 注意点 ###

*  运动模拟物理运动规律
 *  使用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)*

### 匀变速玉栋 ###

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

### 变速曲线运动 ###

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

### 圆周运动 ###

*  根据公式 x²+y²=r²
 *  假定坐标原点为0点
 *  分解为x，y两个方向，其中某一点x,y分成水平方向为sin&和cos&
 *  运动距离 angle>2*PI 运动结束，清除定时器*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>2*PI 运动结束，清除定时器*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的使用；本文代码都进行过测试；下一遍会介绍平抛、自由落体、正弦、贝塞尔运动的实现。