一款基于javascript的3D玻璃破碎特效

之前为大家介绍了一款 html5 canvas实现图片玻璃碎片特效。今天要给大家带来一款基于javascript的3D玻璃破碎特效。效果图如下：

在线预览   源码下载

html代码：

<div id="container">
<div id="fragment">
</div>
</div>

css代码：

 body
{
background-color: #f1f1f1;
margin: 0;
overflow: hidden;
}
#container
{
position: absolute;
width: 384px;
height: 384px;
margin: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
.fragment
{
position: absolute;
width: 48px;
height: 48px;
}

javascript代码：

function init() {
const FRAG_SIZE = 48;
var defaultEase = Sine.easeOut;
var container = document.getElementById('container'),
containerRect = container.getBoundingClientRect(),
fragments = [],
centerX = 192,
centerY = 192;
TweenMax.set(container, {
perspective:600
});
createFragments();
createTweens();
startUpdateLoop();
function createFragments() {
var fragment;
for (var i = 0; i < 8; i++) {
for (var j = 0; j < 8; j++) {
fragment = document.createElement('div');
fragment.className = 'fragment';
TweenMax.set(fragment, {
x:j * FRAG_SIZE,
y:i * FRAG_SIZE
});
container.appendChild(fragment);
fragments.push(fragment);
}
}
}
function createTweens() {
var tl = new TimelineMax({repeat:-1}),
fragment,
delay;
for (var i = 0; i < fragments.length; i++) {
fragment = fragments[i];
delay = 1 - (i % 8) * randomRange(0.04, 0.06);
if (i < 32) {
if (i === 0) {
tl.insert(createSpecialTween(fragment), delay);
}
else {
tl.insert(createArcTween(fragment), delay);
}
console.log('d1', delay);
}
else {
tl.insert(createStraightTween(fragment), delay);
console.log('d2', delay);
}
}
}
function createSpecialTween(fragment) {
var bezierPoints = [
{x:centerX - 24, y:-256},
{x:centerX - 24, y:centerY - 24}
];
var tl = new TimelineMax(),
tween1 = TweenMax.to(fragment, 1.2, {
bezier:{type:'soft', values:bezierPoints},
ease:defaultEase
}),
tween2 = TweenMax.to(fragment, 1.2, {
z:525,
rotationX:360,
rotationY:360,
ease:defaultEase
});
tl.insert(tween1);
tl.insert(tween2);
return tl;
}
function createArcTween(fragment) {
var dx = (centerX - fragment._gsTransform.x - 24),
dy = (centerY - fragment._gsTransform.y - 24);
var bezierPoints = [
{x:fragment._gsTransform.x, y:fragment._gsTransform.y - dy},
{x:fragment._gsTransform.x, y:containerRect.bottom}
];
var tl = new TimelineMax(),
tween1 = TweenMax.to(fragment, randomRange(3.2, 3.1), {
bezier:{values:bezierPoints},
ease:defaultEase
}),
tween2 = TweenMax.to(fragment, randomRange(3.2, 3.1), {
z:randomRange(800, 1000),
rotationX:randomRange(360, 1080),
rotationY:randomRange(360, 1080),
ease:defaultEase
});
tl.insert(tween1);
tl.insert(tween2);
return tl;
}
function createStraightTween(fragment) {
var dx = (centerX - fragment._gsTransform.x - 24) * 4;
return TweenMax.to(fragment, randomRange(3, 3.1), {
x:-dx,
y:window.innerHeight + containerRect.bottom + randomRange(0, 124),
z:randomRange(300, 500) * (Math.random() > 0.5 ? 1 : -1),
rotationX:randomRange(360, 1080),
rotationY:randomRange(360, 1080),
ease:defaultEase
})
}
function startUpdateLoop() {
requestAnimationFrame(tick);
function tick() {
var fragment,
angleX,
angleY;
for (var i = 0; i < fragments.length; i++) {
fragment = fragments[i];
angleX = Math.abs(fragment._gsTransform.rotationX % 180 - 90) / 180;
angleY = Math.abs(fragment._gsTransform.rotationY % 180 - 90) / 180;
var l = Math.round((angleX + angleY) / 2 * 100);
fragment.style.backgroundColor = 'hsl(30,100%,' + l + '%)';
fragment.style.zIndex = Math.round(fragment._gsTransform.z);
}
requestAnimationFrame(tick);
}
}
function randomRange(min, max) {
return min + Math.random() * (max - min);
}
}
window.onload = init;//@ sourceURL=pen.js

注：本文爱编程原创文章，转载请注明原文地址：http://***/Article/7707