也许你见过HTML5图片破碎动画特效,实现的原理也挺简单的。但是你应该没有见过视频也可以破碎重组,这个HTML5动画就是利用Canvas的相关特性,实现了点击鼠标让视频破碎重组的效果。在视频区域点击鼠标,即可让该区域的视频破碎,让后经过一段时间后,破碎的区域又可以重组还原,视觉效果非常棒。
HTML代码
JavaScript代码var video;var copy;var copycanvas;var draw;var TILE_WIDTH = 32;var TILE_HEIGHT = 24;var TILE_CENTER_WIDTH = 16;var TILE_CENTER_HEIGHT = 12;var SOURCERECT = {x:0, y:0, width:0, height:0};var PAINTRECT = {x:0, y:0, width:1000, height:600};function init(){
video = document.getElementById('sourcevid');
copycanvas = document.getElementById('sourcecopy');
copy = copycanvas.getContext('2d');var outputcanvas = document.getElementById('output');
draw = outputcanvas.getContext('2d');
setInterval("processFrame()", 33);
}function createTiles(){var offsetX = TILE_CENTER_WIDTH+(PAINTRECT.width-SOURCERECT.width)/2;var offsetY = TILE_CENTER_HEIGHT+(PAINTRECT.height-SOURCERECT.height)/2;var y=0;while(y
tile.videoX = x;
tile.videoY = y;
tile.originX = offsetX+x;
tile.originY = offsetY+y;
tile.currentX = tile.originX;
tile.currentY = tile.originY;
tiles.push(tile);
x+=TILE_WIDTH;
}
y+=TILE_HEIGHT;
}
}var RAD = Math.PI/180;var randomJump = false;var tiles = [];var debug = false;function processFrame(){if(!isNaN(video.duration)){if(SOURCERECT.width == 0){
SOURCERECT = {x:0,y:0,width:video.videoWidth,height:video.videoHeight};
createTiles();
}//this is to keep my sanity while developing
if(randomJump){
randomJump = false;
video.currentTime = Math.random()*video.duration;
}//loop
if(video.currentTime == video.duration){
video.currentTime = 0;
}
}var debugStr = "";//copy tiles
copy.drawImage(video, 0, 0);
draw.clearRect(PAINTRECT.x, PAINTRECT.y,PAINTRECT.width,PAINTRECT.height);for(var i=0; i 0.0001){//expand
tile.moveX *= tile.force;
tile.moveY *= tile.force;
tile.moveRotation *= tile.force;
tile.currentX += tile.moveX;
tile.currentY += tile.moveY;
tile.rotation += tile.moveRotation;
tile.rotation %= 360;
tile.force *= 0.9;if(tile.currentX <= 0 || tile.currentX >= PAINTRECT.width){
tile.moveX *= -1;
}if(tile.currentY <= 0 || tile.currentY >= PAINTRECT.height){
tile.moveY *= -1;
}
}else if(tile.rotation != 0 || tile.currentX != tile.originX || tile.currentY != tile.originY){//contract
var diffx = (tile.originX-tile.currentX)*0.2;var diffy = (tile.originY-tile.currentY)*0.2;var diffRot = (0-tile.rotation)*0.2;if(Math.abs(diffx)
tile.currentX = tile.originX;
}else{
tile.currentX += diffx;
}if(Math.abs(diffy)
tile.currentY = tile.originY;
}else{
tile.currentY += diffy;
}if(Math.abs(diffRot)
tile.rotation = 0;
}else{
tile.rotation += diffRot;
}
}else{
tile.force = 0;
}
draw.save();
draw.translate(tile.currentX, tile.currentY);
draw.rotate(tile.rotation*RAD);
draw.drawImage(copycanvas, tile.videoX, tile.videoY, TILE_WIDTH, TILE_HEIGHT, -TILE_CENTER_WIDTH, -TILE_CENTER_HEIGHT, TILE_WIDTH, TILE_HEIGHT);
draw.restore();
}if(debug){
debug = false;document.getElementById('trace').innerHTML = debugStr;
}
}function explode(x, y){for(var i=0; i tile.force){
tile.force = force;var radians = Math.atan2(ydiff, xdiff);
tile.moveX = Math.cos(radians);
tile.moveY = Math.sin(radians);
tile.moveRotation = 0.5-Math.random();
}
}
tiles.sort(zindexSort);
processFrame();
}function zindexSort(a, b){return (a.force-b.force);
}function dropBomb(evt, obj){var posx = 0;var posy = 0;var e = evt || window.event;if (e.pageX || e.pageY){
posx = e.pageX;
posy = e.pageY;
}else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}var canvasX = posx-obj.offsetLeft;var canvasY = posy-obj.offsetTop;
explode(canvasX, canvasY);
}function Tile(){this.originX = 0;this.originY = 0;this.currentX = 0;this.currentY = 0;this.rotation = 0;this.force = 0;this.z = 0;this.moveX= 0;this.moveY= 0;this.moveRotation = 0;this.videoX = 0;this.videoY = 0;
}/*
getPixel
return pixel object {r,g,b,a}
*/function getPixel(imageData, x, y){var data = imageData.data;var pos = (x + y * imageData.width) * 4;return {r:data[pos], g:data[pos+1], b:data[pos+2], a:data[pos+3]}
}/*
setPixel
set pixel object {r,g,b,a}
*/function setPixel(imageData, x, y, pixel){var data = imageData.data;var pos = (x + y * imageData.width) * 4;
data[pos] = pixel.r;
data[pos+1] = pixel.g;
data[pos+2] = pixel.b;
data[pos+3] = pixel.a;
}/*
copyPixel
faster then using getPixel/setPixel combo
*/function copyPixel(sImageData, sx, sy, dImageData, dx, dy){var spos = (sx + sy * sImageData.width) * 4;var dpos = (dx + dy * dImageData.width) * 4;
dImageData.data[dpos] = sImageData.data[spos]; //R
dImageData.data[dpos+1] = sImageData.data[spos+1]; //G
dImageData.data[dpos+2] = sImageData.data[spos+2]; //B
dImageData.data[dpos+3] = sImageData.data[spos+3]; //A}
打开App,阅读手记