How to implement element picture mirror flip animation effect on canvas

This article mainly introduces the relevant information on the method of realizing the mirror flip animation effect of element pictures on canvas. The content is quite good. I will share it with you now and give it as a reference.

1. Canvas picture horizontal mirror flip effect preview

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

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

2. Implementation of image flipping on Canvas

It is relatively simple to achieve the flipping effect of elements in CSS. For example, we want To flip a picture horizontally, you only need one line of CSS:

img {
    transform: scaleX(-1);
}

or:

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

But in canvas, it is more troublesome. The trouble is not that it cannot be flipped, but that it cannot be flipped. is 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 the displacement transformation before scale, and then you can see the effect of center flipping.

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 corresponding The horizontal distance formula for offset:

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

So, the key code for final mirror drawing of the picture It becomes like this (assuming the horizontal zoom size is scale):

// 坐标参考调整
context.translate((canvas.width - image.width * scale) / 2, 0);
context.scale(scale, 1);
context.drawImage(image, 0, 0);
// 坐标参考还原
context.setTransform(1, 0, 0, 1, 0, 0);

How to increase the animation effect?

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

There are various easing algorithms, and 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');
// 动画进行
Math.animation(1, -1, 600, 'Quad.easeInOut', function (value, isEnding) {
    // 清除画布内容
    context.clearRect(0, 0, canvas.width, canvas.height);
    // 调整坐标
    context.translate((canvas.width - canvas.width * value) / 2, 0);
    // 调整缩放
    context.scale(value, 1);
    // 绘制此时图片
    context.drawImage(eleImg, 0, 0);
    // 坐标参考还原
    context.setTransform(1, 0, 0, 1, 0, 0);
});

3. Conclusion

Another cold article, canvas. There are not many front-end players, the audience is limited, and it is no more popular than popular technologies. 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. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

html5 uses canvas to draw secondary tree structure diagrams

canvas draws various basic graphics

Use Canvas to imitate the method of loading small balls on Baidu Tieba client

##

The above is the detailed content of How to implement element picture mirror flip animation effect on canvas. For more information, please follow other related articles on the PHP Chinese website!