前言：
此时我们对“js移动动画”大致比较看重，看官们都需要知道一些“js移动动画”的相关文章。那么小编同时在网摘上收集了一些有关“js移动动画””的相关资讯，希望朋友们能喜欢，我们快快来了解一下吧！最近公司项目也挺忙的，所以很少时间来写文章。最近公司有个需求要实现带曲线的上升效果，我这边实现了安卓版本，今天特意用js也写了一份，就当时学习了。JS最终实现如下图，这个图片是不动的，打开是有动画的。
js曲线学习
本来公司效果图如下
大致就是这么一个效果，但是里面涉及的逻辑还是挺多的。因为有好几张UI效果图，目前我就贴出来一张，如果能实现这一张的效果基本其他的也容易搞定了，但是这里我就不分享Android的代码了，毕竟是公司项目，所以很多信息必透露，这里分享JS实现的代码。
原图
JS实现代码如下
<html> <head> </head> <body> <canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;"> 当前浏览器不支持Canvas，请更换浏览器后再试 </canvas> <script> function l(){ this.canvas; // canvas节点 this.ctx; // canvas绘图上下文 this.x; // 横向坐标 this.y; // 纵向坐标 this.rx; //椭圆长轴 this.ry; //椭圆短轴 this.degree1;//初始角度 this.degree2;//结束角度 this.degreecur; //当前角度 }; l.prototype.init = function(){ var canvas = document.getElementById("canvas"); var context=canvas.getContext('2d'); canvas.width = 800; canvas.height = 800; this.canvas = canvas; this.ctx = context; this.degree1 = 20; this.degree2 = 120; this.degreecur = this.degree2; this.x = 200; this.y = 200; this.rx = 150; this.ry = 50; this.increase = 1; }; l.prototype.update = function(){ this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height); this.ctx.lineWidth = 2; // 绘制弧线 this.drawLine('#000', this.degree1, this.degree2); this.drawLine('#f00', this.degreecur, this.degree2); this.drawCr(); this.degreecur -= this.increase; if(this.degreecur < this.degree1){ this.degreecur = this.degree2; } }; l.prototype.drawCr = function(){ var o = this.degreecur * Math.PI/180; var a = this.rx; var b = this.ry; var x = 0; var y = 0; x = a * Math.cos(o); y = b * Math.sin(o); x += this.x; y += this.y; this.ctx.beginPath(); this.ctx.strokeStyle = '#0f0'; this.ctx.fillStyle = '#0f0'; this.ctx.arc(x,y,5,0,2*Math.PI); this.ctx.fill(); this.ctx.closePath(); }; l.prototype.drawLine = function(color, degreeStart, degreeEnd){ this.ctx.beginPath(); this.ctx.strokeStyle = color; //起点x.起点y,半径x,半径y,旋转的角度，起始角，结果角，顺时针还是逆时针 this.ctx.ellipse(this.x,this.y,this.rx,this.ry,0,degreeStart*Math.PI/180,degreeEnd*Math.PI/180,false); this.ctx.stroke(); this.ctx.closePath(); }; var l1 = new l(); // dot移动效果 function animateUpdate() { l1.update(); // 更新dot的当前位置 setTimeout(animateUpdate, 25); } window.onload = function(){ l1.init(); animateUpdate() } </script> </body></html>如果需要验证的可以直接复制上面的代码运行就能看到效果。这里不做演示，本次分享就到此为止，谢谢大家了。如果喜欢就关注，点赞吧，谢谢了。
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #js移动动画
