位置：广州松河 > 技术支持 > HTML5 Canvas 圆周运动的妙用：Loading加载动画

HTML5 Canvas 圆周运动的妙用：Loading加载动画

来源：网络整理时间：2023/2/14 0:18:58 共 3645 浏览

说到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。直接上代码：

Edit in JSFiddle

HTML
Result

<!DOCTYPE html>
    <head>
        <title>Test for H5Draw</title>
        <style>
            #cvs{
                border:solid 1px #999;
                background-color:#000
            }
        </style>
        <script src="http://cloud.github.com/downloads/scottkiss/H5Draw/H5Draw.js"></script>
        <script>
            window.onload = function(){
                
                
                    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];
                    var h5dctx = H5D.D2('cvs');
                    setInterval(function(){
                    h5dctx .clear();
                    h5dctx .drawCircle(240,80,14).stroke(
                    {    color:"#777",
                        lineWidth:8
                    });
                    for(var i = 0;i < 10;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,5).fill(
                        {    color:"rgba(180,180,180,"+alpha[i]+")",
                            shadow:{
                            //blur:2,color:"#ddd"
                        }});
                        angle[i]+=10;
                    }
                    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>

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

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

Edit in JSFiddle

HTML
Result

<!DOCTYPE html>
    <head>
        <title>Test for H5Draw</title>
        <style>
            #cvs{
                border:solid 1px #999;
                background-color:#000
            }
        </style>
        <script src="http://cloud.github.com/downloads/scottkiss/H5Draw/H5Draw.js"></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>

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：jQuery.post 实例 | ·下一条：C#最简单的工作流（转）