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

问题:在按圆运动的条件下,我们使圆的半径逐渐改变(减小或增大),是否就是按平面螺旋线运动?
...全文
230 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

87,888

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧