[读码]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],[动态文本],[像素圆点]
textStage = new createjs.Stage("text");
stage = new createjs.Stage("stage");
text = new createjs.Text("t", "80px 'Source Sans Pro'", "#eee");
circle = new createjs.Shape();
2.移动像素点计算
// c-元素点对象,dir-方向,in:向字聚集,out:打散
// movement-jiggle:快速抖动,float:缓慢移动
function tweenCircle(c, dir) {
if(c.tween) c.tween.kill();
if(dir == 'in') {
//向字聚集
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() {
c.movement = 'jiggle';
tweenCircle(c);
}});
} else if(dir == 'out') {
//打散
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() {
c.movement = 'float';
tweenCircle(c);
}});
} else {
if(c.movement == 'float') {
//打散状态下的缓慢移动
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,
onComplete: function() {
tweenCircle(c);
}});
} else {
//聚集状态下的快速抖动
c.tween = TweenLite.to(c, 0.05, {x: c.originX + Math.random()*3, y: c.originY + Math.random()*3, ease:Quad.easeInOut,
onComplete: function() {
tweenCircle(c);
}});
}
}
}
3.创建文字,并扫描文字位置
//text配置后,画到canvas
textStage.addChild(text);
textStage.update();
//获取[文字Canvas]像素列表
var ctx = document.getElementById('text').getContext('2d');
var pix = ctx.getImageData(0,0,600,200).data;
//获取的像素是RGBA4个表示一个像素点
textPixels = [];
for (var i = pix.length; i >= 0; i -= 4) {
if (pix[i] != 0) {
var x = (i / 4) % 600; // x轴位置,%600(行宽):用于计算多行
var y = Math.floor(Math.floor(i/600)/4); // Y轴位置
//下面的代码,各像素圆点之间的距离为8
if((x && x%8 == 0) && (y && y%8 == 0)) textPixels.push({x: x, y: y});
}
}
4.赋值给像素圆点
for(var i= 0, l=textPixels.length; i<l; i++) {
circles[i].originX = offsetX + textPixels[i].x;
circles[i].originY = offsetY + textPixels[i].y;
tweenCircle(circles[i], 'in');
}
textFormed = true; // 是否已形成文字Flg
//处理多余像素圆点,但是如果文字需要的像素圆点过多,会如何只有一半文字了吧。。。
if(textPixels.length < circles.length) {
for(var j = textPixels.length; j<circles.length; j++) {
circles[j].tween = TweenLite.to(circles[j], 0.4, {alpha: 0.1});
}
}
5.文字爆炸效果
for(var i= 0, l=textPixels.length; i<l; i++) {
tweenCircle(circles[i], 'out');
}
if(textPixels.length < circles.length) {
for(var j = textPixels.length; j<circles.length; j++) {
circles[j].tween = TweenLite.to(circles[j], 0.4, {alpha: 1});
}
}
----
源码地址:
http://www.html5tricks.com/download/html5-text-pixel.rar
演示地址:
http://www.html5tricks.com/demo/html5-text-pixel/index.html
---
如果此效果用来显示图片,岂不更好玩。。。
似乎可以制作印象派作品了,哪天试试
[读码]HTML5像素文字爆炸重组的更多相关文章
- HTML5火焰文字特效DEMO演示
效果展示:http://hovertree.com/texiao/html5/26/ 效果图: 扫描二维码查看效果:
- [读码][js,css3]能感知鼠标方向的图片遮罩效果
效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...
- HTML5火焰文字特效DEMO演示---转载
只有google支持 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- 基于HTML5自定义文字背景生成QQ签名档
分享一款利用HTML5实现的自定义文字背景应用,首先我们可以输入需要显示的文字,并且为该文字选择一张背景图片,背景图片就像蒙版一样覆盖在文字上.点击生成QQ签名档即可将文字背景融为一体生成另外一张图片 ...
- 读《HTML5与CSS3权威指南(上册)》笔记
第二章 1.内容类型:“text/html”.DOCTYPE声明:<!DOCTYPE html>.指定字符编码:<meta charset="utf-8"> ...
- HTML5 <Canvas>文字粒子化
文字粒子化,额或者叫小圆圈化... 1 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...
- Unity 文字爆炸(风化)消失效果 粒子系统应用
利用Unity的粒子系统,使用C#代码控制粒子的位置和速度,实现文字风化爆炸的效果. Unity的东西,不像flash,不能直接放到网页中,没办法了,只能放截图了.有兴趣的可以下载看看:text_ex ...
- JavaScript特效源码(1、文字特效)
注:本文以及以下关于Javascript特效源码都是分享自JavaScript源码大全. 1.逐隐逐现的的特效 逐隐逐现的文字特效[推荐使用][适用于IE4++] (修改显示的文字后根据说明进行共2步 ...
- 大数据篇:一文读懂@数据仓库(PPT文字版)
大数据篇:一文读懂@数据仓库 1 网络词汇总结 1.1 数据中台 数据中台是聚合和治理跨域数据,将数据抽象封装成服务,提供给前台以业务价值的逻辑概念. 数据中台是一套可持续"让企业的数据用起 ...
随机推荐
- 后端码农谈前端(CSS篇)第七课:定位与浮动
一.定位: 1.定位的理解 (1)相对定位 相对定位是一个非常容易掌握的概念.如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素"相对于&qu ...
- SQL*Loader之CASE7
CASE7 1. SQL脚本 case7包含两个SQL脚本,一个是删除脚本ulcase7e.sql,一个是创建脚本ulcase7s.sql [oracle@node3 ulcase]$ cat ulc ...
- JAVA之IO文件读写
IO概述: IO(Input output)流 作用:IO流用来处理设备之间的数据传输 ...
- 22套新鲜出炉的 Web & Mobile PSD 用户界面素材
在这篇文章中,我们展示的是自由和清新的 UI 设计素材套件.这些线框图和 UI 设计工具包让设计师在设计用户界面原型的时候能够非常便利. Web 用户界面,移动用户界面和线框套件对设计师很有用,因为这 ...
- Elasticsearch——分词器对String的作用
更多内容参考:Elasticsearch学习总结 关于String类型--分词与不分词 在Elasticsearch中String是最基本的数据类型,如果不是数字或者标准格式的日期等这种很明显的类型, ...
- Elasticsearch入门介绍
ES是一个高扩展的.开源的.全文检索的搜索引擎,它提供了近实时的索引.搜索.分析功能. ES文档翻译与总结参考:ES知识汇总 应用场景 1 它提供了强大的搜索功能,可以实现类似百度.谷歌等搜索. 2 ...
- 怎么解析json串在.net中
以前知道一种解析json串的方法,觉得有点麻烦.就从别的地方搜到了另一种 string json = vlt.getlist(); JObject jo = JObject.Parse(json); ...
- autofac 注入中i遇到的泛型传参问题
using Autofac; using IService; using System; using System.Collections.Generic; using System.Linq; us ...
- Base64 字符串转图片 问题整理汇总
前言 最近碰到了一些base64字符串转图片的开发任务,开始觉得没啥难度,但随着开发的进展还是发现有些东西需要记录下. Base64 转二进制 这个在net有现有方法调用: Convert.FromB ...
- 不可或缺 Windows Native (16) - C++: 函数重载, 缺省参数, 内联函数, 函数模板
[源码下载] 不可或缺 Windows Native (16) - C++: 函数重载, 缺省参数, 内联函数, 函数模板 作者:webabcd 介绍不可或缺 Windows Native 之 C++ ...