一款基于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://www.w2bc.com/Article/7707