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

来源：互联网发布：手游数据编辑：程序博客网时间：2024/06/05 01:10

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

知识要点：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>

#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>

</body>

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（）方法实现对象按任意平面曲线运动。

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

0 0