JavaScript动画实例线条的旋转.docx
- 文档编号:11710324
- 上传时间:2023-03-30
- 格式:DOCX
- 页数:15
- 大小:4.95MB
JavaScript动画实例线条的旋转.docx
《JavaScript动画实例线条的旋转.docx》由会员分享,可在线阅读,更多相关《JavaScript动画实例线条的旋转.docx(15页珍藏版)》请在冰豆网上搜索。
JavaScript动画实例线条的旋转
JavaScript动画实例:
线条的旋转
1.一个圆点的圆周运动
设平面上有一点P1(x1,y1),则P1与原点(0,0)的距离的平方为x12+y12。
将P1点坐标按下面的公式进行变换,得到一个新的坐标点P2
x2=cos(dlt)*x1-sin(dlt)*y1
y2=sin(dlt)*x1+cos(dlt)*y1
点P2与原点(0,0)的距离的平方为
x22+y22=[cos(dlt)*x1-sin(dlt)*y1]2+[sin(dlt)*x1+cos(dlt)*y1]2
=[cos(dlt)*x1]2-2*cos(dlt)*x1*sin(dlt)*y1+[sin(dlt)y1]2
+[sin(dlt)x1]2+2*cos(dlt)*x1*sin(dlt)*y1+[cos(dlt)*y1]2
=x12+y12
显然,点P1和点P2同位于圆心为(0,0),半径为sqrt(x12+y12)的圆周上。
以坐标(x1,y1)为圆心绘制一个半径为4的小实心圆点,之后不断地按上面的变换公式,由上一个坐标计算出下一个新坐标,再以新坐标为圆心绘制一个半径为4的小实心圆点,则小实心圆点连接为1个圆周。
若绘制下一个小实心圆点前清屏,则呈现小实心圆点的圆周运动动画效果。
编写如下的HTML代码。
DOCTYPEhtml>
rgba(102,237,253,1);"> varcanvas=document.getElementById('myCanvas'); varctx=canvas.getContext('2d'); varw,h; w=canvas.width=window.innerWidth; h=canvas.height=window.innerHeight; varx1=80; vary1=0; ctx.translate(w/2,h/2); functiondraw() { requestAnimationFrame(draw); ctx.clearRect(-w/2,-h/2,w,h); ctx.strokeStyle="red"; ctx.beginPath(); ctx.arc(0,0,80,0,Math.PI*2); ctx.stroke(); ctx.fillStyle="white"; ctx.beginPath(); ctx.arc(x1,y1,4,0,Math.PI*2); ctx.fill(); vardelta=0.05; varx2=Math.cos(delta)*x1-Math.sin(delta)*y1; vary2=Math.sin(delta)*x1+Math.cos(delta)*y1; x1=x2; y1=y2; } draw(); 在浏览器中打开包含这段HTML代码的html文件,可以在浏览器窗口中呈现出如图1所示的动画效果。 图1一个白色圆点的圆周运动 在上面文件中,再增加一个与白色小圆点在同一个圆周上的蓝色小圆点,也绕圆周运动起来。 编写的HTML文件如下。 DOCTYPEhtml>
rgba(102,237,253,1);"> varcanvas=document.getElementById('myCanvas'); varctx=canvas.getContext('2d'); warw=canvas.width=window.innerWidth; warh=canvas.height=window.innerHeight; varx1=80; vary1=0; varp1=0; varq1=80; ctx.translate(w/2,h/2); functiondraw() { requestAnimationFrame(draw); ctx.clearRect(-w/2,-h/2,w,h); ctx.strokeStyle="red"; ctx.beginPath(); ctx.arc(0,0,80,0,Math.PI*2); ctx.stroke(); ctx.fillStyle="white"; ctx.beginPath(); ctx.arc(x1,y1,4,0,Math.PI*2); ctx.fill(); vardelta=0.05; varx2=Math.cos(delta)*x1-Math.sin(delta)*y1; vary2=Math.sin(delta)*x1+Math.cos(delta)*y1; x1=x2; y1=y2; ctx.fillStyle="blue"; ctx.beginPath(); ctx.arc(p1,q1,4,0,Math.PI*2); ctx.fill(); vardelta=0.05; varp2=Math.cos(delta)*p1-Math.sin(delta)*q1; varq2=Math.sin(delta)*p1+Math.cos(delta)*q1; p1=p2; q1=q2; } draw(); 在浏览器中打开包含这段HTML代码的html文件,可以在浏览器窗口中呈现出如图2所示的动画效果。 一个白色小圆点和一个蓝色小圆点在半径为80的圆周上进行运动,且白色小圆点和蓝色小圆点在运动过程中速度相同,两种相距四分之一个圆弧(因为两个圆点的初始位置与圆心的连线的夹角为90°)。 若将上面程序中蓝色小圆点的坐标公式修改为: varp2=Math.cos(2*delta)*p1-Math.sin(2*delta)*q1; varq2=Math.sin(2*delta)*p1+Math.cos(2*delta)*q1; 则在浏览器中呈现出如图3所示的动画效果。 此时,蓝色小圆点的运动速度明显比白色小圆点快。 由此可知,在坐标修改公式中,角度dlt不同,圆点的圆周运动速度也不同。 图2两个小圆点的圆周运动 图3蓝色小圆点的速度比白色小圆点的速度快 为了在画布中绘制多个绕圆周运动的小圆点,引入数组varpoints=[];保存运动的小圆点。 数组中每个元素定义3个分量: 表示运动起始的坐标点(x,y),运动所绕圆周的半径r。 在浏览器窗口中均匀分布5个同心圆,每个圆上取一个小圆点绕圆周运动。 编写的HTML文件如下。 DOCTYPEhtml>
rgba(102,237,253,1);"> varcanvas=document.getElementById('myCanvas'); varctx=canvas.getContext('2d'); varw,h; w=canvas.width=window.innerWidth; h=canvas.height=window.innerHeight; varsize=Math.min(w,h); varnum=5; vars=size/num*0.45 varpoints=[]; for(vari=1;i<=num;i++) { points.push({x: i*s,y: 0,r: i*s}); } ctx.translate(w/2,h/2); functiondraw() { requestAnimationFrame(draw); ctx.clearRect(-w/2,-h/2,w,h); for(vari=0;i { ctx.strokeStyle="red"; ctx.beginPath(); ctx.arc(0,0,points[i].r,0,Math.PI*2); ctx.stroke(); ctx.fillStyle="white"; ctx.beginPath(); ctx.arc(points[i].x,points[i].y,4,0,Math.PI*2); ctx.fill(); vardelta=0.05; varx2=Math.cos(delta)*points[i].x-Math.sin(delta)*points[i].y; vary2=Math.sin(delta)*points[i].x+Math.cos(delta)*points[i].y; points[i].x=x2; points[i].y=y2; } } draw(); 在浏览器中打开包含这段HTML代码的html文件,可以在浏览器窗口中呈现出如图4所示的动画效果。 图45个小圆点绕圆周运动(速度相同) 将上面代码中的“vardelta=0.05;”修改为“vardelta=0.05*points[i].r/size;”,则5个小圆点的运动速度不一样,呈现出如图5所示的动画效果。 图55个小圆点绕圆周运动(速度不相同) 2.小圆点所连接的线条的旋转 将图5所示动画中,相邻圆周上的两个小圆点连接成一条线段,这样5个小圆点连接为4条线段。 5个小圆点绕各自的圆周运动,因此连接成的4个线条也会旋转运动起来。 编写的HTML文件如下。 DOCTYPEhtml>
rgba(102,237,253,1);"> varcanvas=document.getElementById('myCanvas'); varctx=canvas.getContext('2d'); varw,h; w=canvas.width=window.innerWidth; h=canvas.height=window.innerHeight; varsize=Math.min(w,h); varnum=5; vars=size/num*0.45 varpoints=[]; for(vari=1;i<=num;i++) { points.push({x: i*s,y: 0,r: i*s}); } ctx.translate(w/2,h/2); functiondraw() { requestAnimationFrame(draw); ctx.clearRect(-w/2,-h/2,w,h); for(vari=0;i { ctx.strokeStyle="black"; ctx.beginPath(); ctx.moveTo(points[i].x,points[i].y); ctx.lineTo(points[i+1].x,points[i+1].y); ctx.stroke(); ctx.fillStyle="white"; ctx.beginPath(); ctx.arc(points[i].x,points[i].y,4,0,Math.PI*2); ctx.fill(); ctx.beginPath(); ctx.arc(points[i+1].x,points[i+1].y,4,0,Math.PI*2); ctx.fill(); } for(vari=0;i { ctx.strokeStyle="red"; ctx.beginPath(); ctx.arc(0,0,points[i].r,0,Math.PI*2); ctx.stroke(); vardelta=0.05*points[i].r/size; varx2=Math.cos(delta)*points[i].x-Math.sin(delta)*points[i].y; vary2=Math.sin(delta)*points[i].x+Math.cos(delta)*points[i].y; points[i].x=x2; points[i].y=y2; } } draw(); 在浏览器中打开包含这段HTML代码的html文件,可以在浏览器窗口中呈现出如图6所示的动画效果,4段线条旋转运动起来。 若将上面程序中下列4条语句删除 ctx.strokeStyle="red"; ctx.beginPath(); ctx.arc(0,0,points[i].r,0,Math.PI*2); ctx.stroke(); 这样,不再在小圆点运动时绘制其所绕的圆周背景,则在浏览器窗口中呈现出如图7所示的动画效果。 图64段线条旋转运动(有圆周背景) 图74段线条旋转运动(无圆周背景) 3.线条的旋转 下面我们在图7动画效果的基础上进一步扩展。 在页面中均匀放置config.circles=5个圆周,每个圆周上均匀分布config.points个小圆点,相邻圆周上分布顺序号相同的两个小圆点连接成一条线段。 为程序设计方便,抽象两个对象类。 一个是用于描述圆点旋转所绕圆周的类Circles,另一个是用于描述圆周上所分布圆点的类Circle。 编写的HTML文件如下。 DOCTYPEhtml>
rgba(102,237,253,1);"> varcanvas=document.getElementById('myCanvas'); varctx=canvas.getContext('2d'); varw,h; varsize; varcircles; varconfig={}; config.circles=5; config.points=5; functionCircle(r) { this.r=r; varn=config.points; this.points=[]; for(vari=0;i { varangle=Math.PI*2/n*i; varx=Math.cos(angle)*r; vary=Math.sin(angle)*r; this.points.push({x: x,y: y}); } } Circle.prototype.move=function() { vardelta=0.05*this.r/size; this.points.forEach(p=>{ varx2=Math.cos(delta)*p.x-Math.sin(delta)*p.y; vary2=Math.sin(delta)*p.x+Math.cos(delta)*p.y; p.x=x2; p.y=y2; }); } functionCircles(nrOfCircles) { this.circles=newArray(nrOfCircles); vars=size/nrOfCircles*0.45; for(vari=0;i { varr=i*s+s; this.circles[i]=newCircle(r); } } Circles.prototype.move=function() { this.circles.forEach(c=>c.move()); } Circles.prototype.draw=function() { for(vark=0;k { varnrOfPoints=Math.min(this.circles[k].points.length,this.circles[k+1].points.length); for(leti=0;i { ctx.beginPath(); ctx.moveTo(this.circles[k].points[i].x,this.circles[k].points[i].y); ctx.lineTo(this.circles[k+1].points[i].x,this.circles[k+1].points[i].y); ctx.stroke(); ctx.beginPath(); ctx.arc(this.circles[k].points[i].x,this.circles[k].points[i].y,3,0,Math.PI*2); ctx.fill(); ctx.beginPath(); ctx.arc(this.circles[k+1].points[i].x,this.circles[k+1].points[i].y,3,0,Math.PI*2); ctx.fill(); } } } functionreset() { w=canvas.width=window.innerWidth; h=canvas.height=window.innerHeight; size=Math.min(w,h); ctx.translate(w/2,h/2); circles=newCircles(config.circles); } functiondraw() { requestAnimationFrame(draw); ctx.clearRect(-w/2,-h/2,w,h); circles.draw(); circles.move(); } reset(); window.addEventListener("resize",reset); draw(); 在浏览器中打开包含这段HTML代码的html文件,可以在浏览器窗口中呈现出如图8所示的动画效果。 为避免图形文件过大,下列的动画过程均只录制一个片段。 完整的动画演示过程请读者自己打开HTML文件运行程序观看。 图8线条的旋转(config.circles=5,config.points=5) 为config.circles和config.points=5这两个参数设定不同的值,可以呈现出不同的动画效果。 给出2组不同值的设定,呈现的动画效果分别如图9和图10所示。 图9线条的旋转(config.circles=3,config.points=10) 图10线条的旋转(config.circles=6,config.points=24)
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaScript 动画 实例 线条 旋转