使用帆布怎么实现元素图片镜像翻转动画效果 - 行业资讯

　　介绍

使用帆布怎么实现元素图片镜像翻转动画效果?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

<强>一、帆布图片水平镜像翻转效果预览

您可以狠狠的点击这里:帆布图片水平镜像翻转动画演示

演示页面中点击图片动画效果可见。

<强>二、画布上实现图片镜像翻转的实现

CSS中要想实现元素的翻转效果,比较简单,例如我们希望某一张图片水平镜像翻转,只需要一行CSS就可以了:

img { 　　,,,变换:,scaleX (1); 　　}

或者:

img { 　　,,,变换:,规模(1,1); 　　}

但是在画布中,则要麻烦一些,麻烦的并不是无法翻转,而是坐标系的定位。

在画布中,如下代码可以实现资源的水平镜像翻转(假设上下文是帆布的2 d上下文):

context.scale (1, 1),

或者使用setTransform API直接矩阵变换:

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

然而,翻转虽然实现了,但是画布中元素定位就出了很大的问题。这是因为画布的坐标变换系和css不一样,因此,如果我们想实现居中翻转效果,需要在翻转之前将目标元素的中心点移动到变换轴上。

拿水平翻转距离,在规模之前先把位移变换后的水平偏移,然后就能看到一直居中翻转的效果了。

语言苍白,拿图示意一下。

帆布默认的变化坐标系是左上角。

因此,如果水平规模为1,0.5,0,-0.5,1时候的最终位置如下图示意:

使用帆布怎么实现元素图片镜像翻转动画效果

于是可以得到应当偏移的水平距离公式:

<代码>距离=(画布。宽度,mdash;的形象。宽度*规模)/2,

于是,最终镜像绘制图片的关键代码变成这样(假设水平缩放大小是规模):

//,坐标参考调整　　context.translate ((canvas.width 安康;image.width *,规模),/,2,,0); 　　context.scale(规模,1); 　　context.drawImage(图片,,0,0);//,坐标参考还原　　context.setTransform (1, 0, 0, 1, 0, 0),

如何增加动画效果呢?

我们可以借助渐变。js, https://github.com/zhangxinxu/tween

里面有各种缓动算法,借助方便调用的Math.animation()方法,就能轻松实现我们想要的效果啦!

Math.animation(,,,,,,宽松,回调),

动画js如下:

var canvas =, document.querySelector(& # 39;帆布# 39;); 　　var context =, canvas.getContext (& # 39; 2 d # 39;);//,动画进行　　Math.animation (1,, 1,, 600,, & # 39; Quad.easeInOut& # 39;,, function (价值,isEnding), { 　　,,,//,清除画布内容　　,,,context.clearRect (0, 0, canvas.width,, canvas.height); 　　,,,//,调整坐标　　,,,context.translate ((canvas.width 安康;canvas.width *,值),/,2,,0); 　　,,,//,调整缩放　　,,,context.scale(价值,,1); 　　,,,//,绘制此时图片　　,,,context.drawImage (eleImg, 0, 0); 　　,,,//,坐标参考还原　　,,,context.setTransform (1, 0, 0, 1, 0, 0); 　　});

关于使用帆布怎么实现元素图片镜像翻转动画效果问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注行业资讯频道了解更多相关知识。