JavaScript实现春节放鞭炮动画与音效教程

本文介绍如何使用JavaScript和jQuery实现逼真的鞭炮燃放动画。通过构建鞭炮序列、触发点火动作、添加爆炸粒子效果及同步播放音效，还原春节放鞭炮的场景。适合前端开发者学习DOM操作与CSS3动画结合的应用。

前言

提到过年，脑海中浮现的往往是噼里啪啦的鞭炮声。儿时春节，点燃一根香，从成串的鞭炮中取下几个放在石头上，用香火点燃引信，只听“啪”的一声，鞭炮炸响，满地红纸屑，让人倍感畅快。然而受限于各种规定，如今已难以像儿时那样尽情燃放。鞭炮被视为过年的灵魂，若无烟花爆竹，年味似乎淡了许多。既然现实中难以如愿，便尝试在网络世界中实现这一心愿，重温儿时路边放鞭炮的快乐。效果图如下：

制作思路

1）首先构建一串鞭炮

2）点炮，兔年这个任务就交给可爱的小兔吧

3）制作鞭炮爆炸效果

4）添加鞭炮音效

代码实现

构建鞭炮

首先准备一条竖线，作为这串鞭炮的总捻子。

然后沿着捻子在两边排放鞭炮，每个鞭炮的实现方式如下：

<div class="bp-item bp-right bg-delay1 bg-ani-name1" style="left: 127px;top:59.77230769230769px;">
                                <div class="bp-wrap">
                                    <div class="bp" style="transform: scale(0.8) rotate(-19deg);">
                                        <div class="top">
                                            <i></i>
                                        </div>
                                        <div class="side up">
                                            <i></i>
                                        </div>
                                        <div class="side down1">
                                            <i></i>
                                        </div>
                                        <div class="side down2">
                                            <i></i>
                                        </div>
                                        <div class="bottom foot">
                                        </div>
                                        <div class="text">
                                            <div class="out">
                                                <div class="mid">
                                                    <div class="in">
                                                    </div>
                                                </div>
                                            </div>
                                            <span>新</span>
                                        </div>
                                    </div>
                                    <div class="bang bang2">
                                    </div>
                                </div>
                            </div>

安排小兔上场点火

兔年点炮动作就交给小兔吧！在上面加个按钮用来触发点炮动作。

$(".dear-joy").bind("click", function() {
        $(this).removeClass("jump").addClass("dian");
        setTimeout(function() {
            f.trigger("bang") //触发鞭炮爆炸效果
        }, 500);
        $(".dear-joy2").addClass("fadeIn")
    });
		//鞭炮爆炸
    f.bind("bang", function() {
        var w = $(this).find(".bp-item");
        w.each(function(y, z) {
            setTimeout(function() {
                $(z).addClass("on hold-forwards bp-fly")
            }, (w.length - y + 4) * 150)
        }); 
        plays();//启声音
        setTimeout(function() { 
            _audioDom.pause() //音频暂停
        }, 6000); 
    });

爆炸效果

.hold-forwards {
    -webkit-animation-fill-mode: forwards !important;
    animation-fill-mode: forwards !important;
}
.on .bp {
    -webkit-animation: easeOut .2s ease-in;
    animation: easeOut .2s ease-in;
}

添加音频

没有声音的鞭炮是没有灵魂的。

<audio src="http://downsc.chinaz.net/Files/DownLoad/sound/huang/cd9/mp3/222.mp3" id="audio_box"></audio>

到此这篇关于利用JavaScript实现放鞭炮动画效果的文章就介绍到这了,更多相关JavaScript放鞭炮动画内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

利用JavaScript实现放鞭炮动画效果

前言