修饰部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container{
width: 80%;
height: 600px;
border: 2px solid red;
background: #000;
margin:20px auto;
cursor: pointer;
position: relative;
overflow: hidden;
}
.fire{
width: 10px;
height:10px;
position: absolute;
bottom: 0;
}
.small-fire{
width: 10px;
height:10px;
position: absolute;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script src="../move.2.0.js"></script>
<script>
// 烟花就是一个实例
// 主体烟花实例
// 创建元素,设置默认位置,颜色
// 运动到点击的位置
// 删除主体烟花
// 创建小烟花↓
// 炸开的小烟花实例
// 创建,设置位置,颜色
// 计算应该运动到哪,目标
// 运动
// 删除
class Fire{
constructor(pos){
this.cont = document.getElementById("container");
// 因为传给了new的方法,那么constructor负责接收
// 接收之后,直接解析到this,方便在后续方法中使用
this.x = pos.x;
this.y = pos.y;
}
create(){
// 创建元素设置样式和位置
this.f = document.createElement("div");
this.f.className = "fire";
this.f.style.background = randomColor();
this.cont.appendChild(this.f);
// 位置为鼠标点击的坐标的位置
this.f.style.left = this.x + "px";
// 初始信息设置完成后,开始运动
this.fireMove();
}
fireMove(){
// 调用了运动函数,传入要运动的元素,运动的属性和目标,结束后要做的事情
move(this.f,{
top:this.y
},()=>{
// 当主体烟花运动到目标后,删除主体烟花
this.f.remove();
// 准备创建小烟花:
// 准备总个数
var randomNum = random(10,20);
// 准备小烟花炸出来的圆的半径
var r = random(100,200);
// 根据个数,重复创建小烟花实例
for(var i=0;i<randomNum;i++){
// 创建实例时,需要将:以下信息都传到小烟花的实例中
// 大框,坐标,半径,个数,当前烟花的索引
var sf = new SmallFire({
cont:this.cont,
x:this.x,
y:this.y,
r:r,
sum:randomNum,
i:i
});
// 执行创建方法
sf.create();
}
});
}
}
class SmallFire{
constructor(obj){
// 接收并解析:大框,坐标,半径,个数,当前烟花的索引
this.cont = obj.cont;
this.x = obj.x;
this.y = obj.y;
this.r = obj.r;
this.sum = obj.sum;
this.i = obj.i;
}
create(){
// 创建小烟花的元素,设置位置,和样式
this.f = document.createElement("div");
this.f.className = "small-fire";
this.f.style.background = randomColor();
this.cont.appendChild(this.f);
this.f.style.left = this.x + "px";
this.f.style.top = this.y + "px";
// 小烟花开始运动
this.smallMove();
}
smallMove(){
// 为了炸成一个圆,计算目标,根据三角函数和角度转弧度公式,和计算多个点在圆上的平均角度公式
// 三角函数:
// top = sin(弧度) * r
// left = cos(弧度) * r
// 角度转弧度:
// 弧度 = PI / 180 * 平均角度
// 平均角度:
// 平均角度 = 360 / 总数 * 当前数(当前索引)
// left = Math.cos( Math.PI/180 * (360/this.sum*this.i) ) * this.r
// top = Math.sin( Math.PI/180 * (360/this.sum*this.i) ) * this.r
// 注意:
// 1.圆心的位置是,鼠标的位置
// 2.sin和cos的值是小数,页面识别不了小数的像素,所以会超过目标,再回来,再超过。。。。所以会蠕动,那么得取整
// 蠕动的原理:
// 终点设为1.4
// 步长设为1
// 第一步1
// 第二步2
// 第三步回来1
// 第四步过去2
// 第五步回来1
// 第六步过去2
move(this.f,{
left:parseInt(Math.cos( Math.PI/180 * (360/this.sum*this.i) ) * this.r) + this.x,
top:parseInt(Math.sin( Math.PI/180 * (360/this.sum*this.i) ) * this.r) + this.y
},()=>{
this.f.remove();
});
}
}
var ocont = document.getElementById("container");
ocont.onclick = function(eve){
var e = eve || window.event;
// 获取坐标,准备给将来的烟花元素使用
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// 创建烟花元素,时,将坐标传进去,方便将来使用
var f = new Fire({
x:x,
y:y
});
// 执行创建烟花的方法
f.create();
}
function random(a,b){
return Math.round(Math.random()*(a-b)+b);
}
function randomColor(){
return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;
}
// this的指向根据当前的执行场景来确定
// 所有的场景都列出来了
// 不熟悉的不是this,而是场景不熟悉
// 只要能分清当前this的执行场景,剩下的就是向公式中对应
</script>
</html>
move2.0:
//带有px的css属性和透明度,可以运动
//背景色不可以
// 参数2被修改成了对象,那么在使用之前需要解析(遍历)
function move(ele,obj,cb){
clearInterval(ele.t);
ele.t = setInterval(() => {
// 假设状态为:可以清除计时器
var i = true;
// 因为在计时器中才开始使用到对象中的信息,所以在计时器中遍历
// 并提前换来的属性和目标变量
for(var attr in obj){
if(attr == "opacity"){
var iNow = getStyle(ele,attr) * 100;
}else{
var iNow = parseInt(getStyle(ele,attr));
}
let speed = (obj[attr] - iNow)/10;
speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
// 只要有一个属性到目标,就停了,不对
// 必须所有属性到目标,才能停
// 只要有一个属性没到目标,绝对不能停
// 用状态来标记到底要不要停止计时器
// 只要有一个属性没到目标:绝对不能清除计时器
if(iNow !== obj[attr]){
i = false;
}
if(attr == "opacity"){
ele.style.opacity = (iNow + speed)/100;
}else{
ele.style[attr] = iNow + speed + "px";
}
}
// 如果每次计时器执行结束,所有属性都执行了一遍之后,状态还是true,表示,没有被改成false,如果没有被改成false,表示没有属性没到终点,那么状态还是false就不清除
if(i){
clearInterval(ele.t);
// 用户决定在动画结束时要执行的功能,万一用户没传参,做个默认判断
if(cb){
cb();
}
// cb && cb();
}
}, 30);
}
function getStyle(ele,attr){
if(ele.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}