用css3和canvas实现的蜂窝动画效果
近期工做时研究了一下css3动画和js动画。主要是工做中为了加强页面的趣味性，你们都有意无心的加入了很是多动画效果。固然大部分都是css3动画效果。可以gpu加速，这会下降移动端的性能需求。javascript
今天主要说的是蜂窝效果。详细效果你们等下可以执行源代码。这里就不放gif图了。css
css3的原理很是easy，就是经过更改background-size，由于css3中的background中可以设置repeat属性，来使背景图片在x,y方向平铺。一開始先设置background-size:10%, 10%，（这个数值可以自由定义，但不介意设置过大，不然效果不明显）, 最后更改backg-size：100%, 100%；这样会使背景图片充满整个屏幕，哦。对了不要忘记设置background-position：50% 50%；不然你会感受怪怪的，设置background-position是为了是背景图片以中心点的位置来平铺，而系统默认会已左上角来平铺。html
而后经过设置animation动画来调用动画就可以实现这样的效果了java
<pre name="code" class="html">.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绘制的原理很是easy。经过传入width,height的百分比。来计算一共需要画多少个矩形，以及每个矩形的中心点坐标。我把这个代码封装成了一个模块。你们可以一步一步的往下看，首先先定义一个对象honey对象吧css3
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);
// }
},
这种方法很是easy吧。仅仅只是是简单的偏移了一半的宽高。再调用canvas的默认绘制函数
接下来的方法是获取所需要绘制矩形的中心点位置了，先看代码：web
// 获取所有显示小图片的中心点位置
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方向上也同样，最后函数返回一个包括所有坐标点的数组。
接下来就是使用这个数组和上面提供的绘制方法，来一个一个的将所有图片绘制出来。 canvas
完整的模块源代码例如如下：数组
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动画时，你们可以考虑加入这么一个动画效果。
相关文章
- 1. css3实现动画效果
- 2. css3 动画效果实现
- 3. HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
- 4. 2d旋转（css3实现过分效果和动画效果）
- 5. js经过canvas实现动画效果
- 6. HTML5 Canvas动画效果实现原理
- 7. CSS3 实现多个动画效果
- 8. css3如何实现动画效果
- 9. CSS3 实现 loading 动画效果
- 10. 纯CSS3 动画实现打字效果
- 更多相关文章...
- • SVG 模糊效果 - SVG 教程
- • 现实生活中的 XML - XML 教程
- • ☆基于Java Instrument的Agent实现
- • TiDB 在摩拜单车在线数据业务的应用和实践
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
相关文章