Este artigo descreve o método do JS para obter efeitos super legais de animação de fogos de artifício na Web. Compartilhe para sua referência. A análise específica é a seguinte:
Um efeito de animação de configuração de fogos de artifício da web implementado usando o JS é muito deslumbrante, que pode se adaptar ao JS para criar essas animações.
Copie o código da seguinte forma: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitória // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Efeito super legal de fogos de artifício da web </title>
</head>
<style type = "text/css">
.fire {display: block; estouro: oculto; tamanho de fonte: 12px; posição: absoluto};
corpo {transbordamento: oculto; Antecedentes:#000}
html {Overflow: Hidden; Antecedentes:#000}
</style>
<Body>
</body>
<script type = "text/javascript">
var fogo = função (r, cor) {
this.radius = r || 12;
this.color = cor;
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 = {
Anexar: função (pai) {
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? "Block": "Nenhum";
}
}
VAR Fireworks = function () {
Var Fires = new Array ();
var count = 150;
var fl = 250;
var VPX = 500;
var vpy = 300;
var gravity = 0,5;
Var piso = 200;
var de salto = -.8;
Var Timer;
var wind = ((Math.floor (Math.random ()*3) + 3)/10)*(Math.random ()*2 - 1> 0? 1: -1)*. 25;
var wpos = 0;
var wcount;
retornar {
init: function () {
wcount = 50 + math.floor (math.random () * 100);
for (var i = 0; i <contagem; i ++) {
var color = 0xff0000;
color = (math.random () * 0xffffff) .ToString (16) .ToString (). Split (".") [0];
while (color.length <6) {
color = "0" + cor;
}
var fogo = novo incêndio (12, cor);
incêndios.push (fogo);
fogo.YYPOS = -100;
fogo.vz = math.random () * 6 - 3;
fogo.vx = (Math.random ()*2 - 1)*2;
fogo.vy = math.random ()* - 15 - 15;
fogo.x = 500
fogo.y = 600;
Fire.Append (document.body);
}
var que = this;
Timer = setInterval (function () {
WPOS ++;
if (wpos> = wcount) {
WPOS = 0;
wcount = 50 + math.floor (math.random () * 100);
vento = ((math.floor (math.random ()*3) + 3)/10)*(math.random ()*2 - 1> 0? 1: -1)*. 25;
}
for (var i = 0; i <contagem; i ++) {
that.move (incêndio [i]);
}
}, 30);
},
Move: function (fogo) {
fogo.vy += gravidade;
fogo.x += fogo.vx;
fogo.y += fogo.vy;
fogo.vx += wind;
Fire.setPosition (Fire.X, Fire.Y);
if (fogo.x <0 || fogo.x> 1000 || fogo.y <0 || fogo.y> 600) {
fogo.vx = (Math.random ()*2 - 1)*2;
fogo.vy = math.random ()* - 15 - 15;
fogo.x = 500;
fogo.y = 600;
Fire.setPosition (Fire.X, Fire.Y);
}
}
}
}
fogos de artifício (). init ();
</script>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.