Este artículo describe el método de JS para lograr efectos de animación de fuegos artificiales web súper geniales. Compártelo para su referencia. El análisis específico es el siguiente:
Un efecto de animación de ajuste de fuegos artificiales web implementado con JS es muy deslumbrante, que puede adaptarse a JS para crear tales animaciones.
Copie el código de la siguiente manera: <! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 transitional.dtd"> ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<title> Efecto de fuegos artificial web Super Cool </title>
</ablo>
<style type = "text/css">
.fire {display: block; desbordamiento: oculto; tamaño de fuente: 12px; Posición: Absoluto};
cuerpo {desbordamiento: oculto; Antecedentes:#000}
html {desbordamiento: oculto; Antecedentes:#000}
</style>
<Body>
</body>
<script type = "text/javaScript">
var fire = function (r, color) {
this.radius = r || 12;
this.color = color;
this.xpos = 0;
this.ypos = 0;
this.zpos = 0;
this.vx = 0;
this.vy = 0;
this.vz = 0;
this.mass = 1;
this.x = 0;
this.y = 0;
this.p = document.createElement ("span");
this.p.classname = "Fire";
this.p.innerhtml = "*";
this.p.style.fontSize = this.radius + "px";
this.p.style.color = "#" + this.color;
}
Fire.prototype = {
append: function (parent) {
parent.appendChild (this.p);
},
setSize: function (escala) {
this.p.style.fontSize = this.radius * escala + "px";
},
setPosition: function (x, y) {
this.p.style.left = x + "px";
this.p.style.top = y + "px";
},
setVisible: function (b) {
this.p.style.display = b? "Bloque": "Ninguno";
}
}
VAR fuegos artificiales = function () {
var freses = new Array ();
Var Count = 150;
var fl = 250;
var vpx = 500;
var vpy = 300;
Var Gravity = .5;
piso var = 200;
var bounce = -.8;
temporizador var;
var viento = ((math.floor (math.random ()*3) + 3)/10)*(math.random ()*2 - 1> 0? 1: -1)*. 25;
var wpos = 0;
var wcount;
devolver {
init: function () {
wcount = 50 + Math.floor (Math.random () * 100);
para (var i = 0; i <count; i ++) {
var color = 0xff0000;
color = (math.random () * 0xffffff) .ToString (16) .ToString (). Split (".") [0];
while (color.length <6) {
color = "0" + color;
}
var fire = new Fire (12, color);
incendios.push (fuego);
Fire.ypos = -100;
Fire.vz = Math.random () * 6 - 3;
fire.vx = (math.random ()*2 - 1)*2;
Fire.Vy = Math.random ()* - 15 - 15;
Fire.x = 500
Fire.y = 600;
Fire.append (document.body);
}
var que = esto;
timer = setInterval (function () {
wpos ++;
if (wpos> = wcount) {
wpos = 0;
wcount = 50 + Math.floor (Math.random () * 100);
Wind = ((Math.Floor (Math.random ()*3) + 3)/10)*(Math.random ()*2 - 1> 0? 1: -1)*. 25;
}
para (var i = 0; i <count; i ++) {
eso.move (incendios [i]);
}
}, 30);
},
Move: function (fire) {
Fire.Vy += Gravity;
Fire.x += fire.vx;
Fire.y += fire.vy;
Fire.vx += viento;
Fire.setPosition (Fire.x, Fire.y);
if (fire.x <0 || fire.x> 1000 || fire.y <0 || fire.y> 600) {
fire.vx = (math.random ()*2 - 1)*2;
Fire.Vy = Math.random ()* - 15 - 15;
Fire.x = 500;
Fire.y = 600;
Fire.setPosition (Fire.x, Fire.y);
}
}
}
}
fuegos artificiales (). init ();
</script>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.