利用jquery使对象在页面做曲线运动

fengfancky 2015-08-19 07:24:44

知识要点：1.animate()方法；
$(selector).animate({params},speed,callback);
2.利用数学的曲线方程求出x,y的变化规律。
一、轨迹为二次曲线的曲线运动
我们都知道二次曲线方程为： y = a(x-h)^2+k
根据使对象运动的位置，得方程为：y=(-1/600)(x-600)^2+600；
将其关于x求微分得： dy=[(-1/300)x+2]*dx；
因此我们可以理解为：当x变化dx时，y变化dy。
有上述算法为基础，我们进行编程,代码如下:
<html>
<head>
<style type="text/css">
#dv1{
position:absolute; z-index:5;
width: 50px; height: 50px;
background-color: red;
border-radius:30px 30px 30px 30px;
position: absolute;
top:0px;
left: 0px;}
</style><script type="text/javascript"src="jsSrc/jquery-2.1.1.js"></script>
</head>
<body>
<div id="dv1"></div>
<div id="dv2"></div>
<div id="dv3"></div>
</body>
<script type="text/javascript">
var x=0; var y=0;
var a=-1/300;
var x_step=1;
//编写move（）方法；
var move=function(){
//根据已知的x,y的变化规律，设置div的属性left、top的变化规律；
$("#dv1").animate({left:(x+=x_step)+'px',top:(y+=a*x+2)+'p'},5,function(){
move();//回调函数。
if(x>1200)
$("#dv1").stop();
});
}
move();
</script>
</html>
二、运动轨迹为圆
圆的参数方程为：x=a*sin(θ);y=a*cos(θ)，a为半径。
关于θ求微分： dx=a*cos(θ)dθ;dy=-a*sin(θ)dθ。
所以运动的方法如下：
var n=0;
var move=function(){
$("#dv1").animate({left:(x+=a*Math.cos((n++)/10))+'px',top:(y+=-a*Math.sin((n++)/10)))+'p'},5,function(){
move();
});
}
move();

注：在jQuery中cos(n)的角度n为弧度制。这里使用 (n++)/10 即使每次增加 0.1弧度。
注：根据现实需要调整半径和圆心。
注：$(selector).animate({params},speed,callback);
使对象$(selector)在指定的时间内运动到指定的位置。
在这里：
1.{params}为：{left: ,top: } 要运动到的位置。
2.speed：本参数填写一个毫秒数的时间（在这段时间内运动到指定位置）。
3.callback:回调函数，达到使对象持续运动的目的。

小结：只要能求出x,y的变化规律（求微分），就可利用animate（）方法实现对象按任意平面曲线运动。

问题：在按圆运动的条件下，我们使圆的半径逐渐改变（减小或增大），是否就是按平面螺旋线运动？

...全文