JavaScript实现烟花特效(面向对象)

当下，烟花特效是web前端常见的动画效果之一，本攻略将详细介绍如何通过JavaScript编写实现烟花特效。

步骤一：创建HTML文件

在开发本特效之前，首先需要建立一个HTML文件用于展示页面内容。以下是一个基本的HTML模板，用户可以根据需要添加和修改其他元素：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>烟花特效</title>
    <style type="text/css">
        canvas{
            background-color: #000000;
            display: block;
            margin: auto;
            position: absolute;
            top: 0; 
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <canvas id="fireworksCanvas"></canvas>
    <script type="text/javascript" src="fireworks.js"></script>
</body>
</html>

以上代码展示了一个最基本的HTML页面模板。页面中包含一个canvas元素，用于显示烟花的特效。注意，canvas元素的位置需要设置为居中。

步骤二：使用JavaScript编写代码

通过JavaScript编写代码时，可以先定义一个烟花特效对象，以及该对象对应的属性和方法。以下是烟花特效对象的初始定义：

function Fireworks(){
    //存放烟花的数组
    this.fireworks = [];
};

//烟花特效对象的属性
Fireworks.prototype = {
    //添加一个烟花到数组中
    addFirework: function(x, y, vx, vy, color){
        this.fireworks.push(new Firework(x, y, vx, vy, color));
    },

    //更新所有烟花的状态并显示
    update: function(){
        for(var i = 0; i < this.fireworks.length; i++){
            //烟花状态更新
            this.fireworks[i].update();
            //绘制单个烟花
            this.fireworks[i].draw();
        }
    }
};

步骤三：绘制烟花特效

在以上定义中，Fireworks对象包含了fireworks数组，该数组用于存放所有的烟花对象。update()方法用于遍历fireworks数组，进行烟花状态更新和绘制操作。接下来，我们需要定义Firework对象，以便烟花的各种属性、状态、行为、效果均能得到良好的实现和表现：

function Firework(x, y, vx, vy, color){
    //定义一些特效参数
    this.x = x;  //初始位置X
    this.y = y;  //初始位置Y
    this.vx = vx; //初始垂直方向速度
    this.vy = vy; //初始水平方向速度
    this.color = color; //颜色

    //定义烟花爆炸后的粒子效果和其它效果
    this.particles = [];  //存放粒子的数组
    this.gravity = 0.05;  //重力加速度
    this.hue = 0.1;  //定义颜色，hue为色相

    //特效参数：烟花爆炸后的粒子效果
    this.explode = function(yo){
        //添加粒子的数量
        var numParticles = 50 + Math.floor(Math.random()*25);

        for(var i = 0; i < numParticles; i++){
            var particleV = (Math.random()*10) + 5;  //给烟花粒子的速度随机值
            var particleAngle = (Math.PI * 2) / numParticles ;  //给烟花粒子的方向赋随机值
            this.particles.push(new Particle(this.x, this.y, particleV*Math.sin(i*particleAngle)*yo, particleV*Math.cos(i*particleAngle)*yo, this.hue));
        }
    };

    //烟花状态更新
    this.update = function(){
        //粒子效果更新
        for(var i = 0; i < this.particles.length; i++){
            this.particles[i].update();
            if(this.particles[i].y > canvas.height){
                this.particles.splice(i, 1);
            }
        }

        //垂直方向速度
        this.vy += this.gravity;

        //动画效果
        this.x += this.vx;
        this.y += this.vy;

        //粒子效果爆炸
        if(this.vy >= 0){
            this.explode(2);
        }
    };

    //绘制单个烟花
    this.draw = function(){
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, 2, 2);

        for(var i = 0; i < this.particles.length; i++){
            this.particles[i].draw();
        }
    };
}

步骤四：构建动画帧

烟花特效的动画需要借助window.requestAnimFrame()来创建。该方法会在每帧的间隔时刻调用动画函数update()。以下是Fireworks对象的完整实现代码：

(function(){
    var canvas = document.getElementById('fireworksCanvas');
    var ctx = canvas.getContext('2d');  //使用Canvas接口来实现烟花的动画效果
    var fireworks = new Fireworks();  //创建Fireworks对象

    //添加一些烟花特效
    function addFirework(){
        var randomX = Math.floor(Math.random()*canvas.width);
        var randomY = Math.floor(Math.random()*canvas.height/2);
        var randomVx = (Math.random()*5) - 2.5;
        var randomVy = (Math.random()*5) - 2.5;
        var randomColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16); 

        //添加烟花到数组中
        fireworks.addFirework(randomX, randomY, randomVx, randomVy, randomColor);

        //定时添加烟花特效
        setTimeout(addFirework, 250 + Math.floor(Math.random()*1000));
    }

    //动画更新
    function update(){
        ctx.globalAlpha = 0.05;  //每帧绘制之前清除画布并设置全局透明度
        ctx.fillStyle = '#000000';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        fireworks.update();     //通过烟花特效对象的方法来更新烟花的状态和渲染动画
        requestAnimFrame(update);  //通过window.requestAnimFrame()方法来实现Canvas渲染帧
    }

    //执行addFirework()函数
    addFirework();

    //更新每一帧的特效动画
    update();

})();

//requestAnimFrame()：浏览器逐帧请求回调函数
window.requestAnimFrame = (function(){
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame||
        window.mozRequestAnimationFrame ||
        function(callback){
            window.setTimeout(callback, 1000/60);
        };
})();

示例1：在画面中添加更多的烟花特效

用户可以在addFirework()函数中增加添加更多的烟花特效，从而增加页面中烟花的种类和数量，比如：

//添加更多的烟花特效
function addFirework(){
    for(var i = 0; i < 5; i++){
        var randomX = Math.floor(Math.random()*canvas.width);
        var randomY = Math.floor(Math.random()*canvas.height/2);
        var randomVx = (Math.random()*5) - 2.5;
        var randomVy = (Math.random()*5) - 2.5;
        var randomColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16); 
        fireworks.addFirework(randomX, randomY, randomVx, randomVy, randomColor);
    }
    setTimeout(addFirework, 100 + Math.floor(Math.random()*1000));  //设定添加烟花的时间间隔
}

示例2：增加鼠标点击事件

用户可以给canvas添加点击事件，从而实现在用户点击屏幕时会生成一个烟花特效，比如：

canvas.addEventListener('click', function (e) {
    var mouseX = e.pageX - canvas.offsetLeft;
    var mouseY = e.pageY - canvas.offsetTop;
    var randomVx = (Math.random()*5) - 2.5;
    var randomVy = (Math.random()*5) - 2.5;
    var randomColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16); 
    fireworks.addFirework(mouseX, mouseY, randomVx, randomVy, randomColor);
    console.log(fireworks.fireworks);
});

结语

通过以上代码示例，用户可以了解到通过JavaScript编写烟花特效的全过程。在此过程中，我们首先创建html基础模板，然后通过JavaScript编写Fireworks对象和Firework对象，定义烟花的各种属性和效果；接着，通过window.requestAnimFrame()方法来创建动画帧并更新烟花的状态；最后，添加更多的烟花特效和鼠标点击事件，从而形成更丰富的烟花效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现烟花特效(面向对象) - Python技术站