真正的知识来自实践。有时看到一些有趣的现象，就想用所学的知识重现一下。前几天在github上看到一个同事的这么一个小项目。这么小的动画效果是在IOS上实现的。看起来相当耀眼。效果图：我在想用Javascript怎么实现呢？在强烈的好奇心驱使下，我最终使用Javascript和CSS3完成了上面效果的模仿。通过调用该方法，可以一键爆出页面中的图片。命名为boomJS，贴上效果图：感觉效果还是可以的，因为没有用到画布，所以无法获取到图片上每个像素点的颜色值。我用过一些比较巧妙的方法（sha）和（bi）。下面简单介绍一下实现方法：1.构造一个新的图片容器，隐藏原来的图片。原图是一个标签图，一个整体图，最终的效果当然不是在原图上轰轰烈烈，看似连贯的动画本质上只是蒙眼而已。使用Javascript做了一些巧妙的转换，所以第一步是获取原始图像的高度和宽度及其相对于浏览器窗口的位置。然后创建一个新容器附加到原始图像，然后隐藏原始图像。在这个方法中，我主要使用了getBoundingClientRect方法，返回元素的大小和相对视口的位置，绝对满足我的需求。那么，您在这一步中做了什么？简单如下：2.生成一张碎片化的小图***效果是图片boomcracks，所以第二步就是模拟一小块一小块的小图，这里的每一个小块都是一个新建div，然后用图片的定位background-position定位到合适的位置，嘿嘿，看效果：可以看到分成了很多小块，每个小块其实就是一个div然后，将这些小块添加到我们上一步设置的容器中，然后使用原图设置div的背景图，所有的div都使用原图和一张背景图，然后图片定位就可以完成这样一个效果，说起来很简单，但是中间经过了很多计算，图片怎么划分，图片的宽高比例（不管是横图还是竖图），每个小div的定位和siz小div的e。div背景图片的定位可以在这里找到：boomJS。***为了好看，设置了圆角，但是这样爆的话，感觉不够真实，图片一张一张清晰可辨。所以用缩放比例随机放大或缩小每个小块，再看看缩放后的效果：嗯，模糊了很多，效果进一步增强，这样爆炸的时候会更逼真。3.轰隆隆爆炸！好了，到最后一步冰冻人心，我们只需要为每个div块设置移动轨迹，然后同时爆炸即可。过程比较繁琐。需要先计算出图片的中心点，然后每个div块点以中心为参考点直线向外移动。不得不说连高中几何知识都补上了（囧）。为了让效果更逼真，在每个div方块移动的直线距离上加上一个正负值合适的随机数，这样有的方块可以吹远一些，有的方块可以吹近一些.使用未缩放的小块图片做一个粗略的示意图：***在爆裂的瞬间，让每个小块逐渐消失，即可完成如上图所示的效果。综上所述，其实过程中还有很多细节没有讲到。更重要的是动画触发的时序控制。因为最近在研究jQuery源码，所以简单的使用jQuery队列来实现时序控制。说到这里，安利一下我在github上jQuery源码的全文注解，有兴趣的可以看看。jQueryv1.10.2源码注释。那么本文就不贴代码了。完整动画效果的代码在我的github上。如果你有兴趣，也可以看看：boomJSmJS这篇文章很短。有什么问题或者建议可以多交流。如果文中有任何不准确的地方，请告诉我。
