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。

 

另外一種效果是沒有「光帶」，「光帶」 被一系列圓周運動的大小不一樣的圓代替，咱們要作的只是修改上述代碼，把圓與圓之間的距離拉大就好了，而後再定義每一個圓不一樣的大小，最後代碼以下：