说到Loading加载动画，大家再熟悉不过了，目前主要有三种形式：
1.条状加载进度条动画。那么，我们该如何通过html5+js实现这种效果呢？
首先，我们先画一个圆环作为底。然后，我们再画不同于底色的那条绕着圆心旋转的“光带”，问题是我们该如何画这条“光带”，本文将通过画一系列的圆来模拟这条“光带”，当然也有其它方式，比如画圆弧。
定义“光带”需要用到两个数组：一个是这些圆在圆环上的位置，这里有点特殊的是位置数组不是[x,y]这样的坐标点集合，而是一个角度集合，原因是它的位置实际上是和在圆周上的相对角度有关，这也和圆的参数方程有关。
另一个是透明度数组，因为我们看到“光带”的颜色是渐变为透明的。
如上所示，我们定义了10个圆在不同的位置和不同的透明度来模拟“光带”。
接下来来看今天的重点，就是圆的参数方程：
通过该方程，我们可以找到角度和圆周（圆环）上的坐标点的关系，只要改变角度大小，使得角度从0-360度循环改变，那么圆上的坐标点也将随着圆周改变位置，但是始终在圆周上。于是我们可以利用这些坐标点画圆环上的小圆来模拟“光带”。至于参数方程的证明，我这里就不说了，毕竟这里不是初中数学课嘛。过程就这么简单，接下去就是工具的问题了，我们今天的工具是html5+js。直接上代码：
通过代码可以看到，其实过程就是模拟实现圆周运动，这里为了偷懒，不想每次都重复写获得画布上下文等操作，我使用了之前封装的一个画图小工具来进行canvas画图，而没有使用html5直接的画图api。
另一种效果是没有“光带”，“光带” 被一系列圆周运动的大小不同的圆代替，我们要做的只是修改上述代码，把圆与圆之间的距离拉大就行了，然后再定义每个圆不同的大小，最后代码如下：
<!DOCTYPE html> <head> <title>Test for H5Draw</title> <style> #cvs{ border:solid 1px #999; background-color:#000 } </style> <script src=""></script> <script> window.onload = function(){ var angle = [20,50,80,115,150,190,235]; var alpha = [0.4,0.5,0.6,0.7,0.8,0.9,1]; var size = [2,2.5,3,3.5,4,4.5,4.6]; var h5dctx = H5D.D2('cvs'); setInterval(function(){ h5dctx.clear(); for(var i = 0;i < 7;i++){ if(angle[i]==360){angle[i]=0;} var x = 14*Math.cos((angle[i])*Math.PI/180)+240; var y = 14*Math.sin((angle[i])*Math.PI/180)+80; h5dctx.drawCircle(x,y,size[i]).fill( { color:"rgba(156,236,255,"+alpha[i]+")", shadow:{ //blur:2,color:"#ddd" }}); angle[i]+=8; } h5dctx.drawText({ message:"Loading...", xPos:220, yPos:125, type:"fill", color:"rgba(255,255,255,1)", }); },33); } </script> </head> <body> <canvas id="cvs" width="500" height="500"> sorry ，your browser dosen't support html5 </canvas> </body> </html>
相关文章
精彩导读
热门资讯
关注我们
