你的位置:首页 > 网页设计

[网页设计][读码]HTML5像素文字爆炸重组


【边读码,边学习,技术也好,思路也罢】

【一款基于HTML5技术的文字像素爆炸重组动画特效,我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看起来非常棒。】

一开始想着,怎么在一个Canvas里获取文字的像素点位置。
还是说,有专门的Api获取文字的位置。
结果看了代码才发现,原来是用了那么个巧妙的办法[巧妙而超级简单]。
也就是说,所有的图片,都可以动态的用点来画出来了。
虽然说,扫描canvas的做法效率不高,但是似乎也只能这样了。


---
大致实现方法如下:
1.放两个canva,一个用于放置背景以及动态像素点[背景Canvas],另一个不可见的用于画文字[文字Canvas]
2.[背景Canvas]里生成像素圆点小球,使其自由移动。
3.当点击按钮时,先在[文字Canvas]里画上相应的文字。然后扫描[文字Canvas]里的像素,有内容的话,就将该位置指定给像素小球。
4.使用动画,移动小球到指定位置[需要flg来表明状态吧]
---
使用js库:
1.EasePack[渐变效果用]
2.TweenLite[渐变用]
3.easeljs
[Useful for creating games, generative art, and other highly graphical experiences.]

以上插件都整合在CreateJs里
http://createjs.com/
---
关键代码段:

1.创建[背景Canvas],[文字Canvas],[动态文本],[像素圆点]

1 textStage = new createjs.Stage("text");2 stage = new createjs.Stage("stage");3 text = new createjs.Text("t", "80px 'Source Sans Pro'", "#eee");4 circle = new createjs.Shape();

2.移动像素点计算

 1 // c-元素点对象,dir-方向,in:向字聚集,out:打散 2 // movement-jiggle:快速抖动,float:缓慢移动 3 function tweenCircle(c, dir) { 4   if(c.tween) c.tween.kill(); 5   if(dir == 'in') { 6   //向字聚集 7     c.tween = TweenLite.to(c, 0.4, {x: c.originX, y: c.originY, ease:Quad.easeInOut, alpha: 1, radius: 5, scaleX: 0.4, scaleY: 0.4, onComplete: function() { 8     c.movement = 'jiggle'; 9     tweenCircle(c);10     }});11   } else if(dir == 'out') {12   //打散13     c.tween = TweenLite.to(c, 0.8, {x: window.innerWidth*Math.random(), y: window.innerHeight*Math.random(), ease:Quad.easeInOut, alpha: 0.2 + Math.random()*0.5, scaleX: 1, scaleY: 1, onComplete: function() {14     c.movement = 'float';15     tweenCircle(c);16     }});17   } else {18     if(c.movement == 'float') {19     //打散状态下的缓慢移动20     c.tween = TweenLite.to(c, 5 + Math.random()*3.5, {x: c.x + -100+Math.random()*200, y: c.y + -100+Math.random()*200, ease:Quad.easeInOut, alpha: 0.2 + Math.random()*0.5,21       onComplete: function() {22       tweenCircle(c);23       }});24     } else {25     //聚集状态下的快速抖动26     c.tween = TweenLite.to(c, 0.05, {x: c.originX + Math.random()*3, y: c.originY + Math.random()*3, ease:Quad.easeInOut,27       onComplete: function() {28       tweenCircle(c);29       }});30     }31   }32 }

3.创建文字,并扫描文字位置

 1 //text配置后,画到canvas 2 textStage.addChild(text); 3 textStage.update(); 4 //获取[文字Canvas]像素列表 5 var ctx = document.getElementById('text').getContext('2d'); 6 var pix = ctx.getImageData(0,0,600,200).data; 7 //获取的像素是RGBA4个表示一个像素点 8 textPixels = []; 9 for (var i = pix.length; i >= 0; i -= 4) {10   if (pix[i] != 0) {11   var x = (i / 4) % 600; // x轴位置,%600(行宽):用于计算多行12   var y = Math.floor(Math.floor(i/600)/4); // Y轴位置13   //下面的代码,各像素圆点之间的距离为814   if((x && x%8 == 0) && (y && y%8 == 0)) textPixels.push({x: x, y: y});15   }16 }

4.赋值给像素圆点

 1 for(var i= 0, l=textPixels.length; i<l; i++) { 2   circles[i].originX = offsetX + textPixels[i].x; 3   circles[i].originY = offsetY + textPixels[i].y; 4   tweenCircle(circles[i], 'in'); 5 } 6 textFormed = true; // 是否已形成文字Flg 7 //处理多余像素圆点,但是如果文字需要的像素圆点过多,会如何只有一半文字了吧。。。 8 if(textPixels.length < circles.length) { 9   for(var j = textPixels.length; j<circles.length; j++) {10   circles[j].tween = TweenLite.to(circles[j], 0.4, {alpha: 0.1});11   }12 }

5.文字爆炸效果

1 for(var i= 0, l=textPixels.length; i<l; i++) {2   tweenCircle(circles[i], 'out');3 }4 if(textPixels.length < circles.length) {5   for(var j = textPixels.length; j<circles.length; j++) {6   circles[j].tween = TweenLite.to(circles[j], 0.4, {alpha: 1});7   }8 }

----

源码地址:
http://www.html5tricks.com/download/html5-text-pixel.rar

演示地址:
http://www.html5tricks.com/demo/html5-text-pixel/index.html

---

如果此效果用来显示图片,岂不更好玩。。。
似乎可以制作印象派作品了,哪天试试