用css3和canvas实现的蜂窝动画效果
近期工作时研究了一下css3动画和js动画。主要是工作中为了增强页面的趣味性,大家都有意无意的加入了非常多动画效果。当然大部分都是css3动画效果。能够gpu加速,这会降低移动端的性能需求。
今天主要说的是蜂窝效果。详细效果大家等下能够执行源代码。这里就不放gif图了。
css3的原理非常easy,就是通过更改background-size,因为css3中的background中能够设置repeat属性,来使背景图片在x,y方向平铺。一開始先设置background-size:10%, 10%,(这个数值能够自由定义,但不介意设置过大,否则效果不明显), 最后更改backg-size:100%, 100%;这样会使背景图片充满整个屏幕,哦。对了不要忘记设置background-position:50%
50%;否则你会感觉怪怪的,设置background-position是为了是背景图片以中心点的位置来平铺,而系统默认会已左上角来平铺。
然后通过设置animation动画来调用动画就能够实现这样的效果了
<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对象吧
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的默认绘制函数
接下来的方法是获取所须要绘制矩形的中心点位置了,先看代码:
// 获取全部显示小图片的中心点位置
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实现的蜂窝动画效果的更多相关文章
- 纯css3圆形从中心向四周扩散动画效果
查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...
- Magic CSS3 – 创建各种神奇的交互动画效果
Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包,你可以自由地使用您的 Web 项目中.只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 ma ...
- 一款纯css3实现的机器人看书动画效果
今天要给大家介绍一款纯css3实现的机器人看书动画效果.整个画面完全由css3实现的绘制,没有使用任何图片元素.机器人的眼睛使用了动画元素.我们一起看下效果图: 在线预览 源码下载 实现的代码. ...
- CSS3实现的图片加载动画效果
来源:GBin1.com 使用CSS3实现的不同图片加载动画效果,支持响应式,非常适合针对瀑布流布局图片动态加载特效进行增强! HTML <ul class="grid effect- ...
- 用CSS3制作50个超棒动画效果教程
这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动.为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器 ...
- 用css3实现摩天轮旋转的动画效果
用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则.@keyframes 规则用于创建动画.在 @keyf ...
- 详解用CSS3制作圆形滚动进度条动画效果
主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...
- css3实现的3中loading动画效果
一.css3中animation动画各种属性详解: animation Value: [<animation-name> || <animation-duration> ...
- CSS3实现加载中的动画效果
本篇文章由:http://xinpure.com/css3-implementations-of-loading-an-animation-effect/ Loading 的菊花图形组合的不太好,基本 ...
随机推荐
- JS页面刷新保持数据不丢失
转自:https://blog.csdn.net/qq_32439101/article/details/78134877 下面是 DOM Storage 的接口定义: interface Stora ...
- AMD 与 CMD 区别
作者:玉伯链接:https://www.zhihu.com/question/20351507/answer/14859415来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...
- 2013 ACM/ICPC Asia Regional Changsha Online - J
原题戳这里. 题意: 有一未知列数a1,a2,a3.....an, 已知s[i]=a[i-1]+a[i]+a[i] (1<i<n) s[1]=a[1]+a[2]; s[n]=a[n-1] ...
- JQuery特效之心形图片墙
效果如图: 代码如下: <!doctype html> <html lang="en"> <head> <meta charset=&qu ...
- 3、scala函数入门
1.定义函数 2.在代码块中定义函数体 3.递归函数与返回类型 4.默认参数 5.带名参数 6.变长参数 7.使用序列调用变长参数 8.过程 9.lazy值 10.异常 1 ...
- 三维重建:SLAM相关的一些术语解释
SLAM是一个工程问题,再次复习一下工程中可能用到的名词解释. 还是不要看了,高翔的科普读物已经出版了,读他的<slam十四讲>就可以了. 一.度量相关: 世界坐标系:描述图像的平面坐标系 ...
- DNN结构演进History—CNN( 优化,LeNet, AlexNet )
本文相对于摘抄的文章已经有大量的修改,如有阅读不适,请移步原文. 以下摘抄转自于维基:基于深度学习的图像识别进展百度的若干实践 从没有感知域(receptive field) 的深度神经网络,到固定感 ...
- 我的C++笔记(数据的共享与保护)
*数据的共享与保护: * .作用域: * 作用域是一个标识符在程序正文中有效的区域.C++中标识符的作用域有函数原型作用域.局部作用域(块作用域).类作用域和命名空间作用域. * ().函数原型作用域 ...
- (转)基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
http://www.cnblogs.com/wuhuacong/p/5147368.html 在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这 ...
- (转)基于openlayers实现聚类统计展示
http://blog.csdn.net/gisshixisheng/article/details/46137015 概述: 在前面的博文中讲述过基于Arcgis for js如何实现聚类统计展示, ...