HTML5文字爆炸重组动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5文字爆炸重组动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5文字爆炸重组动画特效 </title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>

<canvas id="text" width="500" height="100"></canvas>

<canvas id="stage" width="500" height="100"></canvas>

<form id="form">
    <input type="text" id="inputText" value="HELLO" />
    <input type="submit" value="TRY IT" />
</form>

<script src='js/EasePack.min.js'></script>
<script src='js/TweenLite.min.js'></script>
<script src='js/easeljs-0.7.1.min.js'></script>
<script src='js/requestAnimationFrame.js'></script>
<script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

(function(){
	var stage,textStage,form,input;
	var circles,textPixels,textFormed;
	var offsetX,offsetY,text;
	var colors = ['#B2949D','#FFF578','#FF5F8D','#37A9CC','#188EB2'];
	function init(){
	initStages();
	initForm();
	initText();
	initCircles();
	animate();
	addListeners();
}
// Init Canvas function initStages(){
	offsetX = (window.innerWidth-600)/2;
	offsetY = (window.innerHeight-300)/2;
	textStage = new createjs.Stage("text");
	textStage.canvas.width = 600;
	textStage.canvas.height = 200;
	stage = new createjs.Stage("stage");
	stage.canvas.width = window.innerWidth;
	stage.canvas.height = window.innerHeight;
}
function initForm(){
	form = document.getElementById('form');
	form.style.top = offsetY+200+'px';
	form.style.left = offsetX+'px';
	input = document.getElementById('inputText');
}
function initText(){
	text = new createjs.Text("t","80px 'Source Sans Pro'","#eee");
	text.textAlign = 'center';
	text.x = 300;
}
function initCircles(){
	circles = [];
	for(var i=0;
	i<600;
	i++){
	var circle = new createjs.Shape();
	var r = 7;
	var x = window.innerWidth*Math.random();
	var y = window.innerHeight*Math.random();
	var color = colors[Math.floor(i%colors.length)];
	var alpha = 0.2 + Math.random()*0.5;
	circle.alpha = alpha;
	circle.radius = r;
	circle.graphics.beginFill(color).drawCircle(0,0,r);
	circle.x = x;
	circle.y = y;
	circles.push(circle);
	stage.addChild(circle);
	circle.movement = 'float';
	tweenCircle(circle);
}
}
// animating circles function animate(){
	stage.update();
	requestAnimationFrame(animate);
}
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);
}
}
);
}
}
}
function formText(){
	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;
	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}
);
}
}
}
function explode(){
	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}
);
}
}
}
// event handlers function addListeners(){
	form.addEventListener('submit',function(e){
	e.preventDefault();
	if(textFormed){
	explode();
	if(input.value != ''){
	setTimeout(function(){
	createText(input.value.toUpperCase());
}
,810);
}
else{
	textFormed = false;
}
}
else{
	createText(input.value.toUpperCase());
}
}
);
}
function createText(t){
	var fontSize = 860/(t.length);
	if (fontSize > 160) fontSize = 160;
	text.text = t;
	text.font = "900 "+fontSize+"px 'Source Sans Pro'";
	text.textAlign = 'center';
	text.x = 300;
	text.y = (172-fontSize)/2;
	textStage.addChild(text);
	textStage.update();
	var ctx = document.getElementById('text').getContext('2d');
	var pix = ctx.getImageData(0,0,600,200).data;
	textPixels = [];
	for (var i = pix.length;
	i >= 0;
	i -= 4){
	if (pix[i] != 0){
	var x = (i / 4) % 600;
	var y = Math.floor(Math.floor(i/600)/4);
	if((x && x%8 == 0) && (y && y%8 == 0)) textPixels.push({
	x:x,y:y}
);
}
}
formText();
}
window.onload = function(){
	init()}
;
}
)();

JS代码(requestAnimationFrame.js):

/* requestAnimationFrame poly */
(function(){
	var lastTime = 0;
	var vendors = ['webkit','moz'];
	for(var x = 0;
	x < vendors.length && !window.requestAnimationFrame;
	++x){
	window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
	window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback,element){
	var currTime = new Date().getTime();
	var timeToCall = Math.max(0,16 - (currTime - lastTime));
	var id = window.setTimeout(function(){
	callback(currTime + timeToCall);
}
,timeToCall);
	lastTime = currTime + timeToCall;
	return id;
}
;
	if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id){
	clearTimeout(id);
}
;
}
());

CSS代码(style.css):

body{background:#eee;}
*{position:absolute;margin:0;padding:0;}
input[type="text"]{border:1px solid #ddd;padding:6px;font-size:18px;width:200px;text-transform:uppercase;top:30px;left:130px;}
input[type="submit"]{display:block;width:100px;border:0;line-height:35px;height:35px;color:#fff;background:mediumpurple;font-size:18px;top:30px;left:350px;cursor:pointer;}
form{width:600px;height:100px;}

附件:下载该文件资源,减少时间成本(增值服务)