一 ：曲线运动
实现曲线运动的方法目前了解到两种：一种是三角函数，另一种是贝塞尔曲线，在这里我就介绍下如何用三角函数实现曲线运动。
三角函数相信大家在高中都有接触过，比如 正弦、余弦、正切等。这里我就简单介绍下正弦函数的运动轨迹。
正弦函数图像
QQ截图20160826192452.jpg
如图所示的正弦函数就是一种曲线运动，那么如何能让一个物体能实现这种运动呢？
一：从图中可看出X轴代表的是弧度，Y轴代表的sin(弧度)；
那么弧度与角度是如何换算的？
2π=360°；
1°=2π/360°=π/180°；
1弧度=180°/π；
二: 创建一个Div做为做曲线运动的对象
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
#div{width:10px;height:10px;background: red;position: absolute;top:500px;left:200px;}
.box{position: absolute;border: 1px solid #000;}
</style>
<body>
<div id="div"></div>
</body>
</html>
三：用js去控制这个Div的left值和top值
<script>
window.onload=function(){
var oDiv=document.getElementById('div');
var startX=oDiv.offsetLeft;
var startY=oDiv.offsetTop;
var num=0;
var count=100;
setInterval(function(){
num++
//count用来放大运动的轨迹
//num*Math.PI/180 代表弧度
oDiv.style.left=startX+0.5*(num*Math.PI/180)*count+'px';
oDiv.style.top=startY-2*Math.sin(num*Math.PI/180)*count+'px';
var oDiv1=document.createElement('div');
oDiv1.className='box';
oDiv1.style.left=oDiv.offsetLeft+'px';
oDiv1.style.top=oDiv.offsetTop+'px';
document.body.appendChild(oDiv1);
},10);
}
</script>
曲线运动效果示意图
move.gif
四：如何让多物体做曲线运动
```
<script type="text/javascript">
window.onload=function(){
var oC=document.getElementById('c');
var oGC=oC.getContext('2d');
var setArr=[]; //存储圆心坐标 半径 颜色等数据，以json的形式存储数据
setInterval(function(){
oGC.clearRect(0,0,oC.width,oC.height);
for(var i=0;i<setArr.length;i++){
//通过改变圆心的坐标来实现曲线运动
setArr[i].num++;
setArr[i].X=setArr[i].startX -2*Math.sin(setArr[i].num*Math.PI/180)*setArr[i].step;
setArr[i].Y=setArr[i].startY- 3*(setArr[i].num*Math.PI/180)*setArr[i].step;
if(setArr[i].Y<100){
setArr.splice(i,1);
}
}
for( var i=0;i<setArr.length;i++){
oGC.fillStyle = 'rgba('+setArr[i].c1+','+setArr[i].c2+','+setArr[i].c3+','+setArr[i].c4+')';
oGC.beginPath();
oGC.moveTo(setArr[i].X,setArr[i].Y);
oGC.arc(setArr[i].X,setArr[i].Y,setArr[i].R,0,360*Math.PI/180);
oGC.closePath();
oGC.fill();
}
},1000/60);
setInterval(function(){
var x=Math.random()*oC.width;
var y=oC.height-10;
var r=Math.random()*6+2;
var c1 = Math.round(Math.random()*255);
var c2 = Math.round(Math.random()*255);
var c3 = Math.round(Math.random()*255);
var c4 = 1;
var step=Math.random()*20+10;
var num=0;
var startX=x;
var startY=y;
setArr.push({
X:x,
Y:y,
R:r,
c1:c1,
c2:c2,
c3:c3,
c4:c4,
num:num,
step:step,
startX:x,
startY:y
});
},100);
}
</script>
```
效果示意图
canvas.gif
网友评论