越来越多的人在学习研究 Canvas,然后使用 Canvas 制作各种各样的动画。为了验证 Canvas 动画的可用性,我特意制作了一些 demo,分享给大家!
下面我们一起来进入今天的学习内容,Canvas图片水平镜像翻转效果。
该效果的最终运行截图如下:
而相关的实现代码非常简洁,总共不超过100行。
HTML 实现代码如下:
<canvas width="256" height="192"></canvas>
相关 JavaScript 代码如下:
<script src="animation.js"></script> <script> // 截取自https://github.com/zhangxinxu/Tween/blob/master/tween.js var Tween = { Quad: { easeInOut: function(t, b, c, d) { if ((t /= d / 2) < 1) return c / 2 * t * t + b; return -c / 2 * ((--t) * (t-2) - 1) + b; } } }; // canvas 2d上下文获取 var canvas = document.querySelector('canvas'); var context = canvas.getContext('2d'); // 下面是一开始图片呈现的处理方法 var strImgUrl = 'mm1.jpg'; var eleImg = document.createElement('img'); eleImg.origin = ''; eleImg.onload = function () { context.drawImage(this, 0, 0); }; eleImg.src = strImgUrl; // 水平翻转动画 www.xttblog.com var loop = 1; var flipX = function () { // 缓动执行API // Math.animation(form, to, duration, easing, callback); Math.animation(1 * loop, -1 * loop, 600, 'Quad.easeInOut', function (value, isEnding) { context.clearRect(0, 0, canvas.width, canvas.height); context.translate(canvas.width / 2 - canvas.width * value / 2, 0); context.scale(value, 1); context.drawImage(eleImg, 0, 0); // 坐标参考还原 context.setTransform(1, 0, 0, 1, 0, 0); if (isEnding) { loop = -1 * loop; } }); }; // 点击画布水平动画翻转 canvas.addEventListener('click', flipX); </script>
以上就是关于Canvas上实现元素图片镜像翻转动画的实现。
: » Canvas上实现元素图片镜像翻转动画教程
原创文章,作者:kirin,如若转载,请注明出处:https://blog.ytso.com/tech/aiops/251376.html