用css3和canvas實現的蜂窩動畫效果

近期工作時研究了一下css3動畫和js動畫。主要是工作中為了增強頁面的趣味性，大家都有意無意的加入了非常多動畫效果。當然大部分都是css3動畫效果。能夠gpu加速，這會降低移動端的效能需求。

今天主要說的是蜂窩效果。詳細效果大家等下能夠執行源**。這裡就不放gif圖了。

css3的原理非常easy，就是通過更改background-size，因為css3中的background中能夠設定repeat屬性，來使背景在x,y方向平鋪。一開始先設定background-size:10%, 10%，（這個數值能夠自由定義，但不介意設定過大，否則效果不明顯）, 最後更改backg-size：100%, 100%；這樣會使背景充滿整個螢幕，哦。對了不要忘記設定background-position：50% 50%；否則你會感覺怪怪的，設定background-position是為了是背景以中心點的位置來平鋪，而系統缺省會已左上角來平鋪。

然後通過設定animation動畫來呼叫動畫就能夠實現這樣的效果了

.honey @-webkit-keyframes honeycomb 100%

}

使用css3來實現這樣的蜂窩式的動畫效果，原理簡單。而且效果非常完美，可是唯一一點的不完美在於可能會有一部分手機不相容。而且通過在animation中改動background-size，這樣的行為非常少。儘管不會引起瀏覽器的重排，可是也會引起瀏覽器的區域性重繪。

至於使用canvas來實現嗎。這個純屬無聊，不建議大家使用這樣的方法。在這裡使用canvas來繪製。全然是屬於我的無聊之舉。只是若是你對canvas動畫有意向。能夠留意以下的canvas實現方案。canvas繪製的原理非常easy。通過傳入width,height的百分比。來計算一共須要畫多少個矩形，以及每乙個矩形的中心點座標。我把這個**封裝成了乙個模組。大家能夠一步一步的往下看，首先先定義乙個物件honey物件吧

var honey = function (options) 
} this.canvas = this.canvasid || document.getelementbyid(this.canvasid) || document.getelementbyid('#canvas');
this.ctx = this.canvas.getcontext('2d');
this.canvaswidth = document.body.getboundingclientrect().width;
this.canvasheight = document.body.getboundingclientrect().height;
this.canvas.width = this.canvaswidth;
this.canvas.height = this.canvasheight;
this.stopped = true;
this.width = options['width'] || 10;
this.height = options['height'] || 10;
this.dwidth = options['dwidth'] || 1;
this.dheight = options['dheight'] || 1;
this.img = options.img;
/*if (!options.img) */
};

以下在來定義這個物件中的一些屬性，canvas的繪製影象預設是從左上角開始繪製，因此我們須要自己寫乙個方法來從中心點繪製，能夠通過prototype來加入到屬性中

drawimage : function (x, y, w, h) 
},

這種方法非常easy吧。僅僅只是是簡單的偏移了一半的寬高。再呼叫canvas的預設繪製函式

接下來的方法是獲取所須要繪製矩形的中心點位置了，先看**：

// 獲取全部顯示小的中心點位置
getpoints : function (width, height) );}}
return result;
},

事實上原來就是從canvas的中心點50, 50出發，numw, numh分別表示在水平方向和垂直方向所須要畫的矩形個數，這裡要注意使用math.ceil向上取整。是為了確保可以撐滿整個canvas，然後x = 50 + width * i；代表在x方向上減去width的值，就等於中心點左邊第幾個x值，同理y方向上也一樣，最後函式返回乙個包括全部座標點的陣列。

接下來就是使用這個陣列和上面提供的繪製方法，來乙個乙個的將全部繪製出來。

完整的模組源**例如以下：

define(function (require, exports, module) ;
var honey = function (options) 
} this.canvas = this.canvasid || document.getelementbyid(this.canvasid) || document.getelementbyid('#canvas');
this.ctx = this.canvas.getcontext('2d');
this.canvaswidth = document.body.getboundingclientrect().width;
this.canvasheight = document.body.getboundingclientrect().height;
this.canvas.width = this.canvaswidth;
this.canvas.height = this.canvasheight;
this.stopped = true;
this.width = options['width'] || 10;
this.height = options['height'] || 10;
this.dwidth = options['dwidth'] || 1;
this.dheight = options['dheight'] || 1;
this.img = options.img;
/*if (!options.img) */
}; honey.prototype = 
},// 獲取全部顯示小的中心點位置
getpoints : function (width, height) );}}
return result;
},init : function () 
if (typeof img == 'string') 
tick();
function tick () 
if (height >= 100) 
if (width >= 100 && height >= 100) 
// 繪圖
self.animate(width, height);
raf(function () )}}
},animate : function (w, h) 
},clear : function () 
}; return honey;
})

這裡使用requestanimatioframe來迴圈呼叫，而不是常見的settimeout，詳細原因大家還是google吧。使用canvas來繪製會比較耗效能，不介意大家使用。可是假設是在寫canvas動畫時，大家能夠考慮加入這麼乙個動畫效果。

用css3和canvas實現的蜂窩動畫效果

用CSS3和Canvas來畫網格

用CSS3實現鐘錶效果

用CSS3實現放大效果

用css3和canvas實現的蜂窩動畫效果

用CSS3和Canvas來畫網格

用CSS3實現鐘錶效果

用CSS3實現放大效果

相關推薦