HTML5 Canvas轻松玩-----圆周运动的妙用：Loading加载动画~~

说到Loading加载动画，你们再熟悉不过了，目前主要有三种形式：

1.条状加载进度条动画。

 

2.圆形或者环形加载动画。

 

3.个性化的加载动画。

 

 

经过这三种方式，能够变化出 各类好看的加载动画，特别是第三种方式。至于如何建立这些加载动画，目前主要能够经过静态图片+js，动态图片，flash和Silverlight等浏览器插件来完成。

 

    今天不玩图片，不玩flash，也不玩silverlight，正如本文题目所说，没错，今天将要玩弄下html5的canvas，经过canvas结合js来制做加载动画，而今天的加载动画主要经过圆周运动来完成，因此你也能够猜到，今天将要制做的是圆形环形类别的加载动画，至于其它类别，之后再说，开始吧。

 

     经过观察，能够发现，圆形加载动画，就是绕着圆心作圆周运动的动画，一种形式是：

     一个圆环，而后在圆环上有不一样与圆环颜色的部分在圆环上作圆周运动，固然也能够没有圆环：  

      

那么，咱们该如何经过html5+js实现这种效果呢？

首先，咱们先画一个圆环做为底。而后，咱们再画不一样于底色的那条绕着圆心旋转的“光带”，问题是咱们该如何画这条“光带”，本文将经过画一系列的圆来模拟这条“光带”，固然也有其它方式，好比画圆弧。

定义“光带”须要用到两个数组：一个是这些圆在圆环上的位置，这里有点特殊的是位置数组不是[x,y]这样的坐标点集合，而是一个角度集合，缘由是它的位置其实是和在圆周上的相对角度有关，这也和圆的参数方程有关。

另外一个是透明度数组，由于咱们看到“光带”的颜色是渐变为透明的。

var angle = [10,20,30,40,50,60,70,80,90,100];

var alpha = [0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1]; 

如上所示，咱们定义了10个圆在不一样的位置和不一样的透明度来模拟“光带”。

接下来来看今天的重点，就是圆的参数方程：

 

经过该方程，咱们能够找到角度和圆周（圆环）上的坐标点的关系，只要改变角度大小，使得角度从0-360度循环改变，那么圆上的坐标点也将随着圆周改变位置，可是始终在圆周上。因而咱们能够利用这些坐标点画圆环上的小圆来模拟“光带”。至于参数方程的证实，我这里就不说了，毕竟这里不是初中数学课嘛。过程就这么简单，接下去就是工具的问题了，咱们今天的工具是html5+js。直接上代码：

 

 

经过代码能够看到，其实过程就是模拟实现圆周运动，这里为了偷懒，不想每次都重复写得到画布上下文等操做，我使用了以前封装的一个画图小工具来进行canvas画图，而没有使用html5直接的画图api。

 

另外一种效果是没有“光带”，“光带” 被一系列圆周运动的大小不一样的圆代替，咱们要作的只是修改上述代码，把圆与圆之间的距离拉大就好了，而后再定义每一个圆不一样的大小，最后代码以下：