我正在尝试创建类似的动画： http://neverbland.com/
但不是那个文本，我需要使用徽标（图像），我无法弄清楚如何从图像中间创建爆炸。
以前有人这样做过吗？ 谢谢！
HTML：
<div class="explosion_container">
<canvas widht="100%" height="500px" class="explosion"></canvas>
<div class="waio_logo_container">
<svg id="waio_logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 314.31 89.55"><defs><style>.cls-1{fill:#2e2f2f;}.cls-2{fill:#fdb515;}.cls-3{fill:#f68720;}.cls-4{fill:#f16025;}.cls-5{fill:#fff;}</style></defs><title>Asset 2ldpi</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M105.36,81.5a3.92,3.92,0,0,1,3.84-4.12,3.27,3.27,0,0,1,3,1.8V71.64h1.32V85.49h-1.32l0-1.71a3.34,3.34,0,0,1-3.07,1.86A3.93,3.93,0,0,1,105.36,81.5Zm6.94,0a2.75,2.75,0,0,0-2.82-2.93,3,3,0,0,0,0,5.91A2.77,2.77,0,0,0,112.3,81.5Z"/><path class="cls-1" d="M116.17,74.31a1,1,0,0,1,1.92,0,1,1,0,0,1-1.92,0Zm.29,3.24h1.34v7.94h-1.34Z"/><path class="cls-1" d="M121.2,78.68h-1.28V77.55h1.28V74.33c0-1.78.9-2.55,2.19-2.55a2.31,2.31,0,0,1,2,.84l-.86.84a1.13,1.13,0,0,0-1-.48c-.58,0-1,.31-1,1.34v3.22h3.57v-3.6c0-1.78.9-2.55,2.21-2.55a2.26,2.26,0,0,1,2,1l-.88.79a1.13,1.13,0,0,0-1-.56c-.58,0-1,.33-1,1.34v3.6h2.13v1.13h-2.13v6.81h-1.34V78.68h-3.57v6.81H121.2Z"/><path class="cls-1" d="M135.16,84.51a3.24,3.24,0,0,0,2.51-1.06l.82.81a4.21,4.21,0,0,1-3.34,1.38,4.13,4.13,0,1,1-.19-8.26c2.55,0,4.08,2,4,4.58H132.2A2.74,2.74,0,0,0,135.16,84.51Zm2.45-3.57A2.48,2.48,0,0,0,135,78.51a2.66,2.66,0,0,0-2.74,2.44Z"/><path class="cls-1" d="M141.26,77.55h1.34l0,1.55a2.46,2.46,0,0,1,2.32-1.71,2.31,2.31,0,0,1,1.38.38l-.52,1.17a1.85,1.85,0,0,0-1.09-.31c-1.13,0-2.05.81-2.05,2.67v4.18h-1.34Z"/><path class="cls-1" d="M151.71,84.51a3.24,3.24,0,0,0,2.51-1.06l.82.81a4.21,4.21,0,0,1-3.34,1.38,4.13,4.13,0,1,1-.19-8.26c2.55,0,4.08,2,4,4.58h-6.75A2.74,2.74,0,0,0,151.71,84.51Zm2.45-3.57a2.48,2.48,0,0,0-2.65-2.44,2.66,2.66,0,0,0-2.74,2.44Z"/><path class="cls-1" d="M157.81,77.55h1.34l0,1.63a3,3,0,0,1,2.86-1.8c1.76,0,3,1.21,3,3.28v4.83H163.6V80.81c0-1.4-.65-2.21-2-2.21a2.33,2.33,0,0,0-2.47,2.51v4.37h-1.34Z"/><path class="cls-1" d="M168.07,83.09V78.68h-1.23V77.55h1.23V73.41h1.32v4.14h2.22v1.13h-2.22v4.43c0,1.06.36,1.38.94,1.38A1.45,1.45,0,0,0,171.4,84l.73.84a2.58,2.58,0,0,1-1.94.79C169,85.66,168.07,85,168.07,83.09Z"/><path class="cls-1" d="M179.19,83.78l0,1.71h-1.32V71.64h1.32v7.54a3.31,3.31,0,0,1,3-1.8,4.14,4.14,0,0,1,0,8.26A3.34,3.34,0,0,1,179.19,83.78Zm5.54-2.28A2.7,2.7,0,0,0,182,78.57a3,3,0,1,0,2.74,2.93Z"/><path class="cls-1" d="M190.7,84.82l-3.38-7.27h1.48L191,82.48a8.14,8.14,0,0,1,.36,1.34,6.45,6.45,0,0,1,.36-1.34l2.07-4.93h1.38l-5.18,12h-1.38Z"/><path class="cls-1" d="M200.46,81.5a3.92,3.92,0,0,1,3.84-4.12,3.27,3.27,0,0,1,3,1.8V71.64h1.32V85.49h-1.32l0-1.71a3.34,3.34,0,0,1-3.07,1.86A3.93,3.93,0,0,1,200.46,81.5Zm6.94,0a2.75,2.75,0,0,0-2.82-2.93,3,3,0,0,0,0,5.91A2.77,2.77,0,0,0,207.4,81.5Z"/><path class="cls-1" d="M215.32,84.51a3.24,3.24,0,0,0,2.51-1.06l.82.81a4.21,4.21,0,0,1-3.34,1.38,4.13,4.13,0,1,1-.19-8.26c2.55,0,4.08,2,4,4.58h-6.75A2.74,2.74,0,0,0,215.32,84.51Zm2.45-3.57a2.48,2.48,0,0,0-2.65-2.44,2.66,2.66,0,0,0-2.74,2.44Z"/><path class="cls-1" d="M221.84,78.68h-1.28V77.55h1.28v-3.6c0-1.78.9-2.55,2.21-2.55a2.26,2.26,0,0,1,2,1l-.88.79a1.13,1.13,0,0,0-1-.56c-.58,0-1,.33-1,1.34v3.6h2.13v1.13h-2.13v6.81h-1.34Z"/><path class="cls-1" d="M232.16,80.64c0-1.53-.69-2.13-1.86-2.13A2.71,2.71,0,0,0,228,79.66l-.82-.75a3.77,3.77,0,0,1,3.24-1.53,2.92,2.92,0,0,1,3.11,3.24v4.87h-1.34l.06-1.19a3,3,0,0,1-2.63,1.34c-1.69,0-2.91-.77-2.91-2.42s1.34-2.4,3-2.4h2.47Zm-2.38,1.21c-1,0-1.8.36-1.8,1.32s.67,1.38,1.92,1.38,2.26-.67,2.26-1.71v-1Z"/><path class="cls-1" d="M236.09,82.42V77.55h1.34v4.74c0,1.38.65,2.15,2,2.15a2.33,2.33,0,0,0,2.47-2.51V77.55h1.34v7.94h-1.34l0-1.61a3,3,0,0,1-2.84,1.78A2.91,2.91,0,0,1,236.09,82.42Z"/><path class="cls-1" d="M246.14,71.64h1.34V85.49h-1.34Z"/><path class="cls-1" d="M250.88,83.09V78.68h-1.23V77.55h1.23V73.41h1.32v4.14h2.22v1.13H252.2v4.43c0,1.06.36,1.38.94,1.38a1.45,1.45,0,0,0,1.07-.46l.73.84a2.58,2.58,0,0,1-1.94.79C251.8,85.66,250.88,85,250.88,83.09Z"/><rect class="cls-2" x="23.51" y="38.29" width="39.16" height="10.79" transform="translate(-18.27 43.26) rotate(-45)"/><polygon class="cls-3" points="25.43 53.71 30.12 26.02 37.75 33.66 33.06 61.35 25.43 53.71"/><polygon class="cls-3" points="53.12 26.02 60.75 33.66 56.06 61.35 48.43 53.71 53.12 26.02"/><path class="cls-1" d="M191.37,36.53l3.56-10,3.54,10c.43,1.38.79,2.48,1.12,3.4l9.21,25.65h10.73L196.47,1.46h-3.07l-11.07,30.7-.09.3-11.9,33.06h10.73l9.21-25.65C190.6,39,191,37.86,191.37,36.53Z"/><rect class="cls-1" x="227.73" y="2.04" width="11.26" height="63.48"/><path class="cls-1" d="M283,1.2c-17.27,0-31.31,14.43-31.31,32.16s14,32.16,31.31,32.16,31.31-14.43,31.31-32.16S300.27,1.2,283,1.2Zm0,53.61c-11.54,0-20.93-9.62-20.93-21.45S271.46,11.91,283,11.91s20.93,9.62,20.93,21.45S294.54,54.81,283,54.81Z"/><path class="cls-4" d="M37.75,33.66,30.12,26,8.24,47.91a32.33,32.33,0,0,0,3,12.25Z"/><path class="cls-4" d="M48.43,53.71l7.63,7.63L79.68,37.76c-.19-4.38-1.79-8-3.53-11.73Z"/><polygon class="cls-1" points="165.19 2.05 151.6 41.02 151.27 40.38 134.9 2.04 131.22 2.04 115.56 40.99 115.47 41.18 101.69 2.05 89.64 2.05 112.87 65.52 113.97 65.52 115.36 65.52 133.15 23.93 150.7 65.52 152.17 65.52 153.19 65.52 153.22 65.52 176.07 2.05 165.19 2.05"/><path class="cls-1" d="M43.12,0C19.34,0,0,19.6,0,43.68S19.34,87.37,43.12,87.37A42.55,42.55,0,0,0,73.6,74.58,43.69,43.69,0,0,0,86.23,43.68C86.23,19.6,66.89,0,43.12,0Zm0,78.58a34.9,34.9,0,0,1,0-69.8,34.9,34.9,0,0,1,0,69.8Z"/><rect class="cls-5" x="292.88" y="72.9" width="9.92" height="12.59"/><rect class="cls-1" x="263.13" y="72.9" width="9.92" height="12.59"/><rect class="cls-4" x="273.05" y="72.9" width="9.92" height="12.59"/><rect class="cls-3" x="282.97" y="72.9" width="9.92" height="12.59"/><rect class="cls-2" x="292.88" y="72.9" width="9.92" height="12.59"/></g></g></svg>
</div>
</div>
JS：
var tap = ('ontouchstart' in window || navigator.msMaxTouchPoints) ? 'touchstart' : 'mousedown';
var loadAnimation = function(){
document.body.classList.add('ready');
var canvas = document.querySelector('.explosion');
var ctx = canvas.getContext('2d');
var numberOfParticules = 300;
var x = 0;
var distance = window.innerWidth;
var y = 0;
var animations = [];
var colors = ['#f16026', '#fdb414', '#f16026', '#000000'];
var getFontSize = function() {
return parseFloat(getComputedStyle(document.documentElement).fontSize);
}
var setCanvasSize = function(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
var createCircle = function(x,y){
var p = {};
p.x = x;
p.y = y;
p.color = '#fff';
p.radius = 0;
p.alpha = 1;
p.lineWidth = 3;
p.draw = function(){
ctx.globalAlpha = p.alpha;
ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, 0, 2* Math.PI, true);
ctx.lineWidth = p.lineWidth;
ctx.strokeStyle = p.color;
ctx.stroke();
ctx.globalAlpha = 1;
}
return p;
}
var createParticule = function(x,y) {
var p = {};
p.x = x;
p.y = y;
p.color = colors[anime.random(0, colors.length - 1)];
p.radius = anime.random(getFontSize(), getFontSize() * 0.51);
p.draw = function() {
ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
ctx.fillStyle = p.color;
ctx.fill();
}
return p;
}
var createParticles = function(x,y) {
var particles = [];
for (var i = 0; i < numberOfParticules; i++) {
var p = createParticule(x, y);
particles.push(p);
}
return particles;
}
var animateParticles = function(x,y){
setCanvasSize();
var particles = createParticles(x,y);
var circle = createCircle(x,y);
var particlesAnimation = anime({
targets: particles,
x: function(p) {return p.x + anime.random(-distance, distance);},
y:function(p) {return p.y + anime.random(-250, 250);},
radius:0,
duration: function(){
return anime.random(2200,2800);
},
easing: 'easeOutExpo'
});
var circleAnimation = anime({
targets: circle,
radius:function(){ return anime.random(getFontSize() * 8.75, getFontSize() * 11.25); },
alpha:{
value:0,
easing: 'linear',
duration: function(){
return anime.random(400,600);
},
duration:function(){
return anime.random(2200, 2800);
},
easing: 'easeOutExpo'
}
});
animations.push(particlesAnimation, circleAnimation);
}
var mainLoop = anime({
duration: Infinity,
update: function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
animations.forEach(function(anim) {
anim.animatables.forEach(function(animatable) {
animatable.target.draw();
});
});
}
});
var updateCoords = function(){
x = window.innerWidth / 2;
y = 900 / 2;
}
var setDashoffset = function(el) {
var l = el.getTotalLength();
el.setAttribute('stroke-dasharray', l);
return [l,0];
}
var start_circle = anime({
targets: '#waio_logo',
transform: ['scale(1)', 'scale(0)'],
delay: function(el,i){
return 500 + (i*100)
},
duration: 900,
complete: function(){
updateCoords(),
animateParticles(x,y)
}
});
}
document.addEventListener('DOMContentLoaded', loadAnimation, false);