效果

用到的动画库：anime.js

1，实现一个容器

放容器。

<div id="app"> </div>

给样式。

* { /* 去缝 */ margin: 0; padding: 0; } body { /* 防止泡泡影响DOM */ overflow: hidden; } #app { /* 包裹 */ position: absolute; left: 0; right: 0; top: 0; bottom: 0; outline: solid black 1rem; }

效果：啥也看不到。 调试可以看见容器占满了屏幕。

2，一些辅助函数 随机数

都是基础。

//0到size-1，可取边界。 function getRandom(size) { return Math.round(Math.random() * size); } 随机颜色

简单调用，拼串。

function generateColor() { return ( "rgb(" + getRandom(256) + "," + getRandom(256) + "," + getRandom(256) + ")" ); } DOM添加泡泡元素

创建元素，设置类名，加入父，返回之。

//加入DOM function addNode(tagName, className, father) { let result = document.createElement(tagName); result.classList.add(className); father.appendChild(result); return result; } 3，生成泡泡

给样式。

.buble { position: absolute; width: 2rem; height: 2rem; border-radius: 50%; }

生成泡泡。

"use strict"; let app = document.getElementById("app"); function generateBuble(x, y) { //生成元素 let circle = addNode("div", "buble", app); //初始化 anime.set(circle, { left: x - 16, top: y - 16, backgroundColor: generateColor() }); //开始动画 anime({ targets: circle, scale: 24, opacity: 0, duration: 3000, easing: "linear", complete(e) { app.removeChild(circle); } }); } generateBuble(500,500);

生成div，设置类名，加入容器内。

xy是坐标。 set用于将泡泡移动到坐标中心，设置随机的颜色。 动画：隐身，放大。 完成时移除该泡泡。

调用一下以测试。

效果：

4，点击事件，计时器

点击事件很简单。

app.addEventListener("click", function (e) { generateBuble(e.pageX, e.pageY); });

效果：

计时器。

let timer = null; initTimer(timer); function initTimer(input) { input = setInterval(() => { generateBuble(getRandom(app.offsetWidth), getRandom(app.offsetHeight)); if (app.childElementCount >= 50) { clearInterval(input); } }, 200); }

用函数是为了便于重新初始化。

为了防止泡泡过多，加判断。

效果：

5，一些优化 显示泡泡数量

添加元素。

<div id="app"> <h1 id="amount">1</h1> </div>

生成泡泡时赋值。

let amount = document.getElementById("amount"); amount.innerText = app.childElementCount 重新开始计时器

因为计时器会因为泡泡过多而停止。

用点击事件触发。

if (app.childElementCount <= 10) { initTimer(timer); } 6，小结

用到的知识点：

满屏画布。计时器。随机数。

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。