前端入门（烟花特效，纯 js）

（许久没写前端了，觉得好玩，写个练练手，超级菜鸡入门罢了）

纯 js，这个 html 和 css 就没咋写

<!DOCTYPE html><html><head></head><body><script src="抛物线运动.js"></script><script src="烟花绽开动画.js"></script></body></html>

首先烟花每个粒子看作是一个个小点，在做抛物运动，就是一个简单的通过给出的角度和初速度，求出x和y坐标的分速度，然后每过一段时间更新一下位置即可

function parabolic_motion(item, angle, speed, gravity, time){
    gravity =-gravity;
    var speed_x = speed * Math.cos(angle);
    var speed_y = speed * Math.sin(angle);
    var loction_x = item.getBoundingClientRect().left;
    var loction_y = item.getBoundingClientRect().top;
    var start_motion =setInterval(function(){
        speed_y = speed_y + gravity /200;
        loction_x = loction_x + speed_x /200;
        loction_y = loction_y - speed_y /200;
        item.style.left = loction_x +'px';
        item.style.top = loction_y +'px';},5);
    var stop_motion =setTimeout(function(){clearInterval(start_motion)}, time *1000)}

然后就是随机时间，生成随机颜色粒子，然后随机位置向随机方向进行抛物运动即可，然后其他数据随便设置的合理一点即可，再每个粒子再分别运动一段时间后消失即可

make_firework(300,300,200,100);// location_x 烟花圆心x坐标， location_y 烟花圆心y坐标， firework_num 是烟花数量， firework_R 是烟花半径
function make_firework(location_x, location_y, firework_num, firework_R){
    var firework_data =[];
    var body = document.getElementsByTagName('body')[0];for(var i =0; i < firework_num; i++){
        var angle =(Math.random()*1000%(360/ firework_num)+360/ firework_num * i)* Math.PI /180;
        var num_random = Math.random()/2;
        var position_x = location_x + num_random * Math.cos(angle)* firework_R;
        var position_y = location_y + num_random * Math.sin(angle)* firework_R;
        var item = document.createElement('div');
        body.appendChild(item);
        item.style.position ='fixed';
        item.style.left = position_x +'px';
        item.style.top = position_y +'px';
        item.style.width = firework_R /20+'px';
        item.style.height = firework_R /20+'px';
        item.style.borderRadius ='50%';
        firework_data[i]={'item': item,'angle': angle,'speed': firework_R /4,'gravity': firework_R /10,'time':5};}for(var i =0; i < firework_num; i++){
        var firework_time = Math.random()*3000;setTimeout(function(it){
            it.item.style.backgroundColor ='rgb('+ Math.random()*255+','+ Math.random()*255+','+ Math.random()*255+')';parabolic_motion(it.item, it.angle, it.speed, it.gravity, it.time);}, firework_time, firework_data[i]);setTimeout(function(father, son){
            father.removeChild(son);}, firework_data[i].time *1000+ firework_time, body, firework_data[i].item);}}

（没想到花两个小时才搞出个这么丑的玩意，下次试试搞搞别的东西，溜了）
请添加图片描述
在这里插入图片描述

在这里插入图片描述

标签：前端 javascript css

本文转载自: https://blog.csdn.net/m0_52212261/article/details/122483641
版权归原作者 gronkie 所有，如有侵权，请联系我们删除。

前端入门（烟花特效，纯 js）

发表评论

“前端入门（烟花特效，纯 js）”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航