用css3和canvas实现的蜂窝动画效果_html/css_WEB-ITnose
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了用css3和canvas实现的蜂窝动画效果_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7294字，纯文字阅读大概需要11分钟。
内容图文
最近工作时研究了一下css3动画和js动画，主要是工作中为了增强页面的趣味性，大家都有意无意的添加了很多动画效果，当然大部分都是css3动画效果，可以gpu加速，这会减少移动端的性能需求。 今天主要说的是蜂窝效果，具体效果大家等下可以运行源码，这里就不放gif图了。
css3的原理很简单，就是通过更改background-size，由于css3中的background中可以设置repeat属性，来使背景图片在x,y方向平铺。一开始先设置background-size:10%, 10%，（这个数值可以自由定义，但不介意设置过大，否则效果不明显）, 最后更改backg-size：100%, 100%；这样会使背景图片充满整个屏幕，哦，对了不要忘记设置background-position：50% 50%；否则你会感觉怪怪的，设置background-position是为了是背景图片以中心点的位置来平铺，而系统默认会已左上角来平铺。然后通过设置animation动画来调用动画就可以实现这种效果了
.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来实现这种蜂窝式的动画效果，原理简单，并且效果很完美，但是唯一一点的不完美在于可能会有一部分手机不兼容。并且通过在animation中修改background-size，这种行为很少，虽然不会引起浏览器的重排，但是也会引起浏览器的局部重绘。至于使用canvas来实现吗，这个纯属无聊，不建议大家使用这种方法，在这里使用canvas来绘制，完全是属于我的无聊之举，不过若是你对canvas动画有意向，可以留意下面的canvas实现方案。canvas绘制的原理很简单，通过传入width,height的百分比，来计算一共需要画多少个矩形，以及每个矩形的中心点坐标。我把这个代码封装成了一个模块，大家可以一步一步的往下看，首先先定义一个对象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.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['dheight'] || 1; this.img = options.img; /*if (!options.img) { console.log('没有传入图片地址')； }*/ };下面在来定义这个对象中的一些属性，canvas的绘制图像默认是从左上角开始绘制，因此我们需要自己写一个方法来从中心点绘制，可以通过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); // } },
这个方法很简单吧，只不过是简单的偏移了一半的宽高，再调用canvas的默认绘制函数接下来的方法是获取所需要绘制矩形的中心点位置了，先看代码：
// 获取所有显示小图片的中心点位置 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; },其实原来就是从canvas的中心点50, 50出发，numW, numH分别表示在水平方向和垂直方向所需要画的矩形个数，这里要注意使用Math.ceil向上取整，是为了确保能够撑满整个canvas，然后x = 50 + width * i；代表在x方向上减去width的值，就等于中心点左边第几个x值，同理y方向上也一样，最后函数返回一个包含所有坐标点的数组。接下来就是使用这个数组和上面提供的绘制方法，来一个一个的将所有图片绘制出来。完整的模块源码如下：
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'); this.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['dheight'] || 1; this.img = options.img; /*if (!options.img) { console.log('没有传入图片地址')； }*/ }; Honey.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); // } }, // 获取所有显示小图片的中心点位置 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; }, 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('没有传入图片地址'); 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; // 防止图片过大缩放，自动设置停止标志位 if (width >= 100) { width = 100; } if (height >= 100) { height = 100; } if (width >= 100 && height >= 100) { self.stopped = true; } // 画图 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;})这里使用requestAnimatioFrame来循环调用，而不是常见的setTimeout，具体原因大家还是Google吧。使用canvas来绘制会比较耗性能，不介意大家使用，但是如果是在写canvas动画时，大家可以考虑添加这么一个动画效果。
内容总结
以上是互联网集市为您收集整理的用css3和canvas实现的蜂窝动画效果_html/css_WEB-ITnose全部内容，希望文章能够帮你解决用css3和canvas实现的蜂窝动画效果_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】