Honeycomb animation effects implemented with css3 and canvas, css3canvas

Honeycomb animation effects implemented with css3 and canvas, css3canvas

Recently, I have studied css3 and js animations. They are mainly used to enhance the fun of pages. We have intentionally or unintentionally added a lot of animations. Of course, most of them are css3 animations, gpu acceleration reduces performance requirements on mobile terminals.

Today, we mainly talk about cellular effects. For specific effects, you can run the source code. Here, we will not place gif images.

The principle of css3 is very simple, that is, by changing the background-size, because the background in css3 can set the repeat attribute to tile the background image in the x and y directions. First, Set background-size: 10%, 10% (this value can be freely defined, but you don't mind setting too large, otherwise the effect is not obvious), and finally change backg-size: 100%, 100%; this will fill the background image with the whole screen. Oh, don't forget to set the background-position: 50% 50%; otherwise, you will feel strange, background-position is set to tile the background image at the center point. By default, the background position is tiled in the upper left corner. Then, you can call the animation by setting the animation to achieve this effect.

<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%;}}

Css3 is used to implement the honeycomb animation effect. It is simple in principle and has perfect results. However, the only difference is that some mobile phones may be incompatible. In addition, by modifying the background-size in animation, this behavior is rare. Although it will not cause browser rearrangement, it will also cause partial repainting of the browser.

As for how to use canvas to implement it, this is purely boring. We do not recommend that you use this method. Here we use canvas to draw it. It is totally boring, however, if you are interested in canvas animation, you can pay attention to the canvas implementation solution below. The principle of canvas painting is very simple. The percentage of width and height is input to calculate the number of rectangles to be drawn and the coordinates of the center of each rectangle. I encapsulated this code into a module. You can look at it step by step. First, define an object honey.

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. wi Dth = 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 ['height'] | 1; this. img = options. img;/* if (! Options. img) {console. log ('image address not passed in ');}*/};

Some attributes of this object are defined below. The canvas image is drawn from the upper left corner by default. Therefore, we need to write a method to draw from the center point. We can add it to the attribute through 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(self.img, left, top, width, height);// }},

This method is simple, but it is a simple offset of half of the width and height, and then calls the default draw function of canvas.

The following method is to obtain the center point of the rectangle to be drawn. first look at the Code:

// Obtain the center point position of all 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 result = []; for (var I =-Math. ceil (numW * 0.5); I <= Math. ceil (numW * 0.5); I ++) {var x = 50 + width * I; for (var j =-Math. ceil (numH * 0.5); j <= Math. ceil (numH * 0.5); j ++) {var y = 50 + height * j; result. push ({x: x * this. canvasWidth/100, y: y * this. canvasHeight/100}) ;}} return result ;},

In fact, it turns out that the number of rectangles to be drawn in the horizontal and vertical directions is represented by the center point of the canvas 50, 50, numW, and numH respectively. Math should be used here. ceil rounded up to ensure that the entire canvas can be fully filled, and then x = 50 + width * I; indicates that the width value is subtracted from the x direction, it is equal to the number of x values on the left of the center. Similarly, in the y direction, the function returns an array containing all coordinate points. Next we will use this array and the above method to draw all the images 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'); t His. 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 ['dh Eight '] | 1; this. img = options. img;/* if (! Options. img) {console. log ('image address not passed in ');} */}; Honey. prototype = {// draw with the center point 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); //}, // obtain the center point position of all small images displayed getPoints: function (widt H, height) {// var width = parseInt (w), height = parseInt (h); var numW = Math. ceil (100/width), numH = Math. ceil (100/height); var result = []; for (var I =-Math. ceil (numW * 0.5); I <= Math. ceil (numW * 0.5); I ++) {var x = 50 + width * I; for (var j =-Math. ceil (numH * 0.5); j <= Math. ceil (numH * 0.5); j ++) {var y = 50 + 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. dheight, loaded = false; var self = this; var img = this. img; if (! Img) {console. log ('image address not passed in '); 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 excessively large image scaling and automatically sets the stop flag if (width> = 100) {width = 100 ;} if (height> = 100) {height = 100;} if (width> = 100 & height> = 100) {self. stopped = true;} // draw 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, requestAnimatioFrame is used for loop calling, instead of common setTimeout. For the specific reason, Google. Painting with canvas is performance-consuming and does not mind. However, when writing a canvas animation, you can consider adding such an animation effect.

HTML5 canvas plotting and CSS3 plotting which has more advantages?

A brief explanation:
CSS is more like cropping multiple "rectangles" (div), splicing them into a pattern, and then coloring the pattern.
Canvas starts from a vertex, extends countless vertices, gets a line, and gets a surface (pattern surface of triangle, circle, rectangle, etc.) after the extension line, and then draws and colors the line or surface.
CSS is more like a hand-made course for children. Canvas is more like drawing with a pen, but the picture drawn is more like a vector image that can control the size.
Simple Description

Canvas is more efficient than CSS in the face of curves and more complex graphics. In addition, Canvas is closer to the commonly used mathematical thinking methods when determining coordinates.

You can only give a brief description.



Js does not use css3 canvas or other technologies. How can I rotate images at any angle?

No js or css3. It seems that you only have the flash option mentioned above ..

There is also Microsoft's Silverlight. You can also say this. It was originally positioned as the flash killer, but it was not successful. There were too few plug-ins installed, and most people could not see it.

Learn about js and css. flash is also unreliable on mobile phones in the mobile age.