扑面而来的碎片图片3D炸裂效果初体验_html/css_WEB-ITnose
程序员文章站
2022-06-13 11:23:21
...
之前逛园子的时候看到 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 sizeimg.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