vimsk

说到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。

 

另一种效果是没有“光带”,“光带” 被一系列圆周运动的大小不同的圆代替,我们要做的只是修改上述代码,把圆与圆之间的距离拉大就行了,然后再定义每个圆不同的大小,最后代码如下:

 

 

 

分类:

技术点:

相关文章: