Cellular animation effects with CSS3 and canvas

Recently work on the study of CSS3 Animation and JS animation, mainly in order to enhance the fun of the page, we are intentionally or unintentionally added a lot of animation effect, of course, most of them are CSS3 animation effect, can GPU acceleration, which will reduce the performance requirements of the mobile side.

Today is mainly about the honeycomb effect, the specific effect of everyone can run the source code, here will not put a GIF map.

The principle of CSS3 is simple, that is, by changing the background-size, the Repeat property can be set in the background in CSS3, so that the background picture is tiled in X, y direction. First set background-size:10%, 10%, (this value can be defined freely, but do not mind set too large, otherwise the effect is not obvious), the last change backg-size:100%, 100%; this will make the background picture full screen, oh, Yes, don't forget to set background-position:50% 50%; otherwise you'll feel weird, set background-position to be the background image is tiled with the location of the center point, and the system defaults to the top left corner. You can then do this by setting the animation animation to invoke the animation.

<pre name= "code" class= "html" >.honey {Position:absolute;top:0;left:0;height:100%;width:100%;background:url ( 2.jpg) repeat;background-size:30% 30%;background-position:center center;-webkit-animation:honeycomb 3s 1 linear;} @-webkit-keyframes Honeycomb {0% {background-size:10% 10%;} 100% {background-size:100% 100%;}}

Using CSS3 to achieve this kind of honeycomb animation effect, the principle is simple, and the effect is perfect, but the only point of imperfection is that some of the phones may not be compatible. And by modifying the background-size in animation, this behavior is rare, although it does not cause the browser to reflow, but also causes the browser to redraw locally.

As for the use of canvas to achieve, this is purely boring, do not recommend the use of this method, the use of canvas here to draw, is entirely my boring move, but if you are interested in canvas animation, you can pay attention to the following canvas implementation scheme. The principle of canvas drawing is simple, by passing in the percentage of width,height, to calculate the total number of rectangles that need to be drawn, as well as the center point coordinates of each rectangle. I have this code encapsulated into a module, you can step-by-step look down, first define an object Honey object bar

var Honey = function (options) {for (var i in options) {if (Options.hasownproperty (i)) {this[i] = options[i];}} 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) {Console.log (' No incoming picture address ');}*/};

To define some of the properties in this object, the canvas's drawing image is drawn by default from the upper left corner, so we need to write a method to draw from the center point, which can be added to the property by prototype.

Drawimage:function (x, Y, W, h) {var width = w * this.canvaswidth/100,height = h * this.canvasheight/100;var top = y -Height/2,left = X-width/2;var self = this;//var img = self.img;//img.onload = function () {Self.ctx.drawImage (s Elf.img, left, top, width, height),//}},

This method is simple, but it is simply offset by half the width of the high, and then call the canvas's default drawing function

The next method is to get the center point position of the rectangle you want to draw, first look at the code:

Gets all the center point locations showing small images getpoints:function (width, height) {//var width = parseint (w), height = parseint (h); var numw = math.c Eil (100/width), NUMH = Math.ceil (100/height), var result = [];for (var i =-math.ceil (NUMW * 0.5); I <= Math.ceil (nu MW * 0.5);  i++) {var x = + Width * I;for (var j =-math.ceil (NUMH * 0.5); J <= Math.ceil (NUMH * 0.5); J + +) {var y = + + height * J;result.push ({x:x * this.canvaswidth/100, Y:y * this.canvasheight/100});}} return result;},

In fact, the original is from the center of the canvas 50, 50 departure, NUMW, NUMH, respectively, in the horizontal and vertical direction of the number of rectangles needed to draw, it is important to note that the use of math.ceil upward rounding, is to ensure that the entire canvas can be filled, and then x = + Width * I; Represents the value of subtracting width in the x direction, which is equal to the X-value on the left side of the center point, and the same in the Y direction, and the last function returns an array containing all the coordinate points. The next step is to use this array and the drawing method provided above to draw all the pictures one by one.

The complete module source code is as follows:

Define (function (Require, exports, module) {var RAF = Window.requestanimationframe | |  Window.webkietrequestanimationframe | |  Function (callback) {SetTimeout (callback, 1000/60); };var Honey = function (options) {for (var i in options) {if (Options.hasownproperty (i)) {this[i] = options[i];}} 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) {Console.log (' No incoming picture address ');}*/}; Honey.prototype = {//with center point to draw Drawimage:function (x, Y, W, h) {var width = w * this.canvaswidth/100,height = h * This.canvasheight/100;var top = Y-height/2,left = X-width/2;var self = this;//var img = self.img;//img. onload = function () {self.ctx.drawImage (self.img, left, top, width, height);//}},//gets all the center point locations showing small images getpoints:function (width, height) {//var width = parseint (w), height = parseint (h), var numw = Math.ceil (100/width), NUMH = Math.ceil (100/height), Var re Sult = [];for (var i =-math.ceil (NUMW * 0.5); I <= Math.ceil (NUMW * 0.5); i++) {var x = + Width * I;for (var j =-M Ath.ceil (NUMH * 0.5); J <= Math.ceil (NUMH * 0.5); J + +) {var y = + Height * J;result.push ({x:x * this.canvaswidth/100, Y:y * this.canvasheight/100});}} Return Result;},init:function () {var width = This.width,height = This.height,dwidth = This.dwidth,dheight = This.dheigh t,loaded = false;; var self = this;var img = this.img;if (!img) {Console.log (' No incoming picture address '); return;} if (typeof img = = ' string ') {var image = new Image (); image.src = img;img = Image;this.img = img;} tick (); function ticK () {if (!self.stopped) {width + = dwidth;height + = dheight;//prevents the image from being too large, automatically sets the STOP flag bit if (width >=) {width = 100;} if (height >=) {height = 100;} if (width >= && height >=) {self.stopped = true;} Drawing self.animate (width, height); RAF (function () {tick ();})}}},animate:function (W, h) {var self = this;var points = self.getpoints (W, h);//Console.log ( Points.length, W, h); Self.clear (); for (var i = 0, len = points.length; i < Len; i++) {var point = points[i];//Console. Log (Point.x, Point.y, W * this.canvaswidth/100, H * this.canvasheight/100); Self.drawimage (Point.x, Point.y, W, h);}} , Clear:function () {this.ctx.clearRect (0, 0, this.canvaswidth, this.canvasheight);}}; return Honey;})

Here is the use of requestanimatioframe to cycle calls, rather than the common settimeout, the specific reason for everyone or Google bar. Using canvas to draw will be more cost-effective, and don't mind being used, but if you're writing canvas animations, you can consider adding an animated effect.

Cellular animation effects with CSS3 and canvas