扑面而来的碎片--图片3D炸裂效果初体验-茄果

之前逛园子的时候看到 ChokCoco 的爆炸效果作品：【BOOM】一款有趣的Javascript动画效果 （大神英文有没有拼错呀←.←） ，觉得蛮有意思的，效果如下：

不过觉得这个爆炸效果还是偏软了一点，没有爆炸那种碎片飞溅的感觉， 一直 念念不忘想要自己做一个3D效果的爆炸动效。这两天在搞一些小动画，就顺便也把3D爆炸做了出来，动画效果：

实现

原理很简单，就是用很多小图片拼凑成大图片，然后让小图片按照一定规律运动形成爆炸效果。这里的爆炸效果用的是 CSS3 的 3D 变换来做的，通过 js 动态改变变换参数形成动画。实现步骤简单说说：

1、图片拼凑

这一步相对简单，用的是很多 div 标签的背景图拼凑的，设置好每个 div 标签的 position 和 background-position 就可以了。这里要注意的一点就是添加 div 标签是记得要用 innerHTML 一次性全部添加进去。 虽然这里没有直接显示图片，但是这里还是 new 了一个 image，并将图片拼凑放在 load 事件中执行。效果和代码分别如下(实际效果没格子线的)：

 var  img =  new   Image();
img.src  = 'img/zoro.jpg';     //  160*160，or you need to change wrapper's size 
img.onload =  function   () {
      var  x = y = 0 ,
    div  = styleCtn = '' ,
    imgWidth  =  this  .width,
    imgHeight  =  this  .height,
    pwidth  = pheight = 10 ,
    nx  = Math.floor(imgWidth / pwidth),     //  x方向粒子个数 
    ny = Math.floor(imgHeight / pheight),     //  y方向粒子个数 
    wrap = document.getElementById('zd-wrap' );
                    
      for  ( var  i = 0, num = nx * ny; i  ) {
        x  = (i % nx) *  pwidth;
        y  = Math.floor(i / ny) * 10 ;
    styleCtn  = 'left: ' + x + 'px; top: ' + y + 'px; background-position: ' + (-x) + 'px ' + (-y) + 'px;' ;
    div  = div + '


      
查看更多关于扑面而来的碎片--图片3D炸裂效果初体验-茄果的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did115866