脚本宝典收集整理的这篇文章主要介绍了前端入门(烟花特效,纯 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);
}
}
(没想到花两个小时才搞出个这么丑的玩意,下次试试搞搞别的东西,溜了)
以上是脚本宝典为你收集整理的前端入门(烟花特效,纯 js)全部内容,希望文章能够帮你解决前端入门(烟花特效,纯 js)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。