常规运动2

第二篇主要实现正弦、平抛、自由落体、贝塞尔曲线运动。

使用的样式、注意事项与常规1相同。

正弦运动

• 根据公式 s=sin(α)
• 角度α是唯一参数，通过定时器来更新角度
• 运动距离α>2PI 运动结束，清除定时器clearInterval(timer)*
• sin的值域为[-1,1],展示效果不明显，对横纵坐标值都进行了增幅

    var α = 0,
    	addN = 20,
    	x,y,
    	timer = null;
    sin();
    function sin(){
    	timer = setInterval(function(){
    		α+=0.05;
    		y = addN*Math.sin(α);
    		x = addN*α;
    		if(α > Math.PI*2) clearInterval(timer);
    		ball.style.transform = 'translate('+ x+'px,'+y+'px)';
    		createDom(x,y);
    	})
    }
复制代码

正切运动

• 根据公式 s=tan(α)
• 角度α是唯一参数，通过定时器来更新角度
• 运动距离α>2PI 运动结束，清除定时器clearInterval(timer)*
• tan的值域为[-∞,+∞],无穷大不好展示，对横纵坐标值都进行了增幅并对纵坐标的最大值做了限制

    var α = 0,
    	addN = 20,
    	x,y,
    	timer = null;
    	tan();
    function tan(){
    	timer = setInterval(function(){
    		α+=0.01;
    		y = addN*Math.tan(α);
    		x = addN*α;
    		if(α > Math.PI*2) clearInterval(timer);
    		if(Math.abs(y)>90) return; //人为设定最大值
    		ball.style.transform = 'translate('+ x+'px,'+y+'px)';
    		createDom(x,y);
    	})
    }
复制代码

自由落体运动

• 根据公式 s=Vot + gt²/2
• 假定坐标原点为0点
• g，Vo为常量，s为只与t有关的2次函数
• 运动距离 s>Sa 运动结束，清除定时器clearInterval(timer)
• 特殊的匀加速运动

    var t =0,//时间
    	g = 5,//加速度
    	Vo = 0,//初速度
    	s=0,//位置
    	timer = null,//保存计时器
    	ballR = 10,//球半径
    	Sa = 300;//下落距离
    
    drop();
    function drop(){
    	timer = setInterval(function(){
    		t+=0.05;
    		s = Vo*t + 0.5*g*t*t;//距离公式
    		ball.style.transform = 'translate(0px,'+s+'px)';//位移
    		createDom(ballR/4,s)
    		if(s>Sa-ballR) {
    			clearInterval(timer);
    		}
    	})
    }
复制代码

平抛运动

• 根据公式 s=Vxt + gt²/2
• 运动分解为水平和垂直方向，水平防线为初速度为Vx的匀速直线运动，垂直方向为初速度为0的匀加速运动
• 假定坐标原点为0点
• g，Vo为常量，s为只与t有关的2次函数
• 运动距离 Sy>300 运动结束，清除定时器clearInterval(timer)
• 平抛运动=匀速直线运动+自由落体运动

    var Vx = 10,
    	t = 0,
    	g = 2,
    	Sx,Sy,
    	timer = null;
    	flatThrow();
    function flatThrow(){
    	timer = setInterval(function(){
    		t+=0.1;
    		Sx = Vo*t;
    		Sy = 0.5*g*t*t;
    
    		ball.style.transform = 'translate('+ Sx+'px,'+Sy+'px)';
    		createDom(Sx,Sy);
    		if(Sy>300-10){
    			clearInterval(timer);
    		}
    	})
    }
复制代码

贝塞尔曲线

• 以上为贝塞尔1-N阶曲线的公式
• 根据以上公式可以理解为起始点、控制点、结束点的向量关系，是特殊的曲线运动
• 将向量拆分成x,y两个值，分别带入求解，即为对应该时间点t的坐标位置
• x,y为最高项为t的N阶函数
• P0为起点，P3为终点，P1，P2为控制点
• 运动距离 Sy>300 运动结束，清除定时器clearInterval(timer)

    var P0 = [0,0],
    	P1 = [134, -100],
    	P2 = [177, 145],
    	P3 = [0, 250],
    	time = 0,
    	timer = null;
    function getSigle(x1,x2,x3,x4,t){
    	return x1*(1-t)*(1-t)*(1-t) + 3*x2*t*(1-t)*(1-t) + 3*x3*t*t*(1-t) + x4*t*t*t;
    }
    function getPoint(p0,p1,p2,p3,t){
    	 var x = getSigle(p0[0],p1[0],p2[0],p3[0],t);
    	 var y = getSigle(p0[1],p1[1],p2[1],p3[1],t);
    	 return [x,y];
    }
    bezierThi(P0,P1,P2,P3);
    function bezierThi(p0,p1,p2,p3,bool){
    	timer = setInterval(function(){
    		time+=0.005;
    		if(time>1) {
    			clearInterval(timer);
    		}
    		var position = getPoint(p0,p1,p2,p3,time);
    		var x = position[0];
    		var y = position[1];
    
    		ball.style.transform = 'translate('+ x+'px,'+y+'px)';
    		createDom(x,y);
    	});
    }
复制代码

总结

较为复杂运动只是普通运动特殊形式或组合；对特殊形式找规律，按规律求解；组合形式对运动拆解，分别处理；看似复杂的东西都是由基础部分构成，找出本质，列出流程，问题迎刃而解。