使用的html加js写的，可以封装成组件
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background: #000;
position: relative;
height: 100vh;
}
.box {
width: 375px;
height: 700px;
background: #fff;
border: 25px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.total {
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 20px;
background: red;
}
.species {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 999;
}
.speciesstyle {
position: absolute;
border-radius: 20px;
background: rgb(255, 241, 50);
}
</style>
</head>
<body>
<div class="box">
<!-- 金币飞向 -->
<div class="total"></div>
</div>
<script>
/**
* 目前使用的是添加蒙层的操作，金币动画执行过程中无法点击其他操作
* 需要可以改成其他方式
* 参数不多，可以改成其他框架组件，都差不多
*/
let showSetlits = false; //是否已存在
let R = 80; // 扩散半径
let time = 0.5; //扩散过度时间
let time2 = 1; // 收集过度时间
let w = 20; // 金币大小
let Num = 8 //金币数量
const open = document.getElementsByClassName('box')[0] //获取页面信息
const total = document.getElementsByClassName('total')[0] // 获取金币最终飞向
// 点击生成金币,可替换成点击某个元素,替换坐标即可
open.onclick = function (event) {
// 金币执行过程中不在添加新的事件
if (showSetlits) return
let {
offsetX,
offsetY
} = event
setlits(offsetX, offsetY)
};
// 计算金币群生成位置
function setlits(X, Y) {
var species = document.createElement('div');
species.className = 'species'
for (i = 0; i < Num; i++) {
var div = document.createElement('div');
div.className = 'speciesstyle'
div.style.width = w + 'px',
div.style.height = w + 'px',
div.style.left = X + 'px',
div.style.top = Y + 'px',
div.style.transform = 'translate(0%, 0%)',
div.style.transition = `${time}s`
species.appendChild(div);
}
open.appendChild(species)
showSetlits = true
setTimeout(() => {
clickss(X, Y)
}, 0)
}
// 计算金币扩散范围和坐标
function clickss(X, Y) {
const specielist = document.getElementsByClassName('speciesstyle')
const num = specielist.length
const center = {
x: X,
y: Y
}
for (i = 0; i < num; i++) {
// 有规律的扩散
// const xz = center.x + Math.floor(Math.random() * (R- R + 1))+ R * Math.sin(2 * Math.PI * i / num)
// const yz = center.y + Math.floor(Math.random() * (R- R + 1)) + R * Math.cos(2 * Math.PI * i / num)
// 按照圆形计算并给予随机数，看起来才没有那么有规律 随机扩散
const xz = center.x + Math.floor(Math.random() * ((R * 1.1) - (R * 0.6) + 1)) + (0.6 * R) * Math.sin(2 * Math.PI * i / num)
const yz = center.y + Math.floor(Math.random() * ((R * 1.1) - (R * 0.6) + 1)) + (0.6 * R) * Math.cos(2 * Math.PI * i / num)
// 赋值
specielist[i].style.transform = `translate(${xz - (X + w / 2)}px, ${yz - (Y + w / 2)}px)`
}
// 扩散结束，进行飞向终点计算
setTimeout(() => {
for (i = 0; i < num; i++) {
specielist[i].style.transition = `${time2}s`
specielist[i].style.transform = `translate(0,0)`
specielist[i].style.left = total.offsetLeft + 'px'
specielist[i].style.top = total.offsetTop + 'px'
}
// 结束清除蒙层
setTimeout(() => {
remove()
}, (Number(time2) + 0.5) * 1000) //飞行时间结束
}, (Number(time) + 0.5) * 1000) //扩散时间结束
}
// 清除dom
function remove() {
const species = document.getElementsByClassName('species')[0].remove()
showSetlits = false
}
</script>
</body>
</html>
没有设置随机数的扩散是这样的
下面是效果图
