HTML5動感圓圈

概述

利用HTML5 Canvas實現的炫酷動感的圓圈動畫。

詳細

代碼下載：http://www.demodashi.com/demo/10419.html

1、準備工做

本demo使用HTML5進行實現，在主流瀏覽器上運行便可。爲了保證平臺兼容性，我使用了lufylegend引擎，不過渲染部分用的是原生代碼，事件、適配等用的是引擎提供的API。引擎地址：http://lufylegend.com/lufylegend

2、程序實現

本案例主要修改Main.js文件實現效果。

Main.js核心代碼以下（其中c是CanvasRenderingContext2D對象）：

for (var i = 1; i <= 60; i++) {
    var angle = i * 6 / 180 * Math.PI;
    var r = Math.abs(30 * (pull + Math.sin((twist * 6 * (i + timer * 2) / 180 * Math.PI))));
    r = r % 60;

    var d = (2 + shout) * (60 - shout * r),
    x = d * Math.cos(angle),
    y = d * Math.sin(angle);

    c.save();

    c.beginPath();
    c.fillStyle = getColor();
    c.globalAlpha = r / 100;
    c.arc(x, y, r, 0, Math.PI * 2);
    c.fill();
    c.restore();
}

能夠看到，咱們首先經過循環建立60個圓圈，而後使用絕對值，正弦等數學計算方式來獲取每一個圓圈的半徑，並根據半徑來肯定x、y座標。其中c爲畫布對象，twist、shout、pull等都是運動軌跡計算時的參數，timer就是從效果開始播放後的到如今所用時間，至關於物理v-t圖中的自變量t。

至於這些參數的變化和timer的變化，我把他們放在了時間軸事件中。具體的實現代碼能夠下載後參看。

3、運行效果

4、文件截圖

雙擊index.html可運行看效果。

5、其餘補充

本demo的靈感來自於scratch網站上一位國外大牛的做品。我在他的創意之上進行改進獲得這個demo。

 

代碼下載：http://www.demodashi.com/demo/10419.html

注：本文著做權歸做者，由demo大師發表，拒絕轉載，轉載須要做者受權