How to implement element picture mirror flip animation effect on canvas

You can click here: canvas picture horizontal mirror flip animation demo

The animation effect of clicking the picture on the demo page is visible.

It is relatively simple to achieve the flipping effect of elements in CSS. For example, if we want a certain image to be flipped horizontally, we only need one line of CSS:

 img { transform: scaleX(-1);}

or:

 img { transform: scale(-1, 1);}

But in canvas, it is a little more troublesome. The trouble is not that it cannot be flipped, but the positioning of the coordinate system.

In Canvas, the following code can achieve horizontal mirror flipping of resources (assuming context is the 2d context of Canvas):

 context.scale(-1, 1);

Or use the setTransform API for direct matrix transformation:

 context.setTransform(-1, 0, 0, 1, 0, 0);

However, although flipping is implemented, there is a big problem with the positioning of elements in Canvas. This is because the coordinate transformation system of Canvas is different from that of CSS. Therefore, if we want to achieve a centered flip effect, we need to move the center point of the target element to the transformation axis before flipping.

Take the horizontal flip distance, translate the horizontal offset after displacement transformation before scaling, and then you can see the effect of always centering the flip.

The language is pale, so let’s take a picture to illustrate.

The default change coordinate system of canvas is the upper left corner.

Therefore, if the horizontal scale is 1, 0.5, 0, -0.5, -1, the final position is as shown below:

So we can get the horizontal distance formula that should be offset:

distance = (canvas.width – image.width * scale) / 2;

Therefore, the final key code for mirroring and drawing pictures becomes like this (assuming that the horizontal scaling size is scale):

 //Coordinate reference adjustment context.translate((canvas.width - image.width * scale) / 2, 0);context.scale(scale, 1);context.drawImage(image, 0, 0);//Coordinate reference Restore context.setTransform(1, 0, 0, 1, 0, 0);

How to add animation effect?

We can use Tween.js, https://github.com/zhangxinxu/tween

There are various easing algorithms in it. With the help of the convenient Math.animation() method, we can easily achieve the effect we want!

 Math.animation(form, to, duration, easing, callback);

The animation JS is as follows:

 var canvas = document.querySelector('canvas');var context = canvas.getContext('2d');//Animation Math.animation(1, -1, 600, 'Quad.easeInOut', function (value, isEnding ) { // Clear the canvas content context.clearRect(0, 0, canvas.width, canvas.height); // Adjust the coordinates context.translate((canvas.width - canvas.width * value) / 2, 0); //Adjust the scaling context.scale(value, 1); //Draw the current image context.drawImage(eleImg, 0, 0); //Coordinate reference restoration context.setTransform(1, 0, 0, 1, 0, 0);});

Another cold article. There are not many front-end users of canvas, and its audience is limited. It is not as popular as popular technology. However, as the old saying goes, no good deed is too small to be neglected. I hope that some friends can provide help when they search for related issues in the future.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.