この記事では、超クールなWeb花火アニメーション効果を実現するJSの方法について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
JSを使用して実装されたWeb Fireworksの設定アニメーション効果は非常に見事であり、JSに適応してそのようなアニメーションを作成できます。
次のようにコードをコピーします。<
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title>超クールなWeb Firework Effect </title>
</head>
<style type = "text/css">
.fire {display：block;オーバーフロー：隠し;フォントサイズ：12px;位置：絶対};
ボディ{オーバーフロー：隠された;背景：＃000}
HTML {Overflow：Hidden;背景：＃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 = {
追加：function（parent）{
parent.appendChild（this.p）;
}、
SetSize：function（scale）{
this.p.style.fontsize = this.radius * scale + "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？ 「ブロック」：「なし」;
}
}
var fireworks = function（）{
var fires = new array（）;
var count = 150;
var fl = 250;
var vpx = 500;
var vpy = 300;
Var Gravity = .5;
var floor = 200;
var Bounce = -.8;
varタイマー;
var wind =（（math.floor（math.random（）*3） + 3）/10）*（math.random（）*2-1> 0？1：-1）*。25;
var wpos = 0;
var wcount;
戻る {
init：function（）{
wcount = 50 + math.floor（math.random（） * 100）;
for（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）;
fires.push（fire）;
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 that = this;
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;
}
for（var i = 0; i <count; i ++）{
that.move（fires [i]）;
}
}、30）;
}、
移動：function（fire）{
fire.vy +=重力;
fire.x += fire.vx;
fire.y += fire.vy;
fire.vx += wind;
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）;
}
}
}
}
花火（）。init（）;
</script>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。