gsap实现鼠标点击一次就多一个随机移动的小球
时间: 2023-07-15 09:09:53 浏览: 87
可以使用GSAP的动画库来实现鼠标点击一次就多一个随机移动的小球,具体实现步骤如下:
1. 定义一个空数组来存储小球对象。
```
var balls = [];
```
2. 监听鼠标点击事件,并在点击时创建一个新的小球对象,设置其随机的起始位置和颜色,并将其添加到数组中。
```
document.addEventListener("click", function(e) {
var ball = document.createElement("div");
ball.classList.add("ball");
ball.style.left = e.clientX + "px";
ball.style.top = e.clientY + "px";
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
ball.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
document.body.appendChild(ball);
balls.push(ball);
});
```
3. 使用GSAP的TweenMax库来随机移动小球,设置随机的x和y方向的移动距离,并在移动结束后从数组中移除该小球对象。
```
function moveBall(ball) {
TweenMax.to(ball, Math.random() * 2 + 1, {
x: Math.random() * 100 - 50,
y: Math.random() * 100 - 50,
onComplete: function() {
document.body.removeChild(ball);
balls.splice(balls.indexOf(ball), 1);
}
});
}
```
4. 在点击事件中循环遍历数组中的所有小球对象,并调用moveBall函数来移动它们。
```
document.addEventListener("click", function(e) {
// ...
balls.forEach(moveBall);
});
```
完整代码如下:
```
var balls = [];
document.addEventListener("click", function(e) {
var ball = document.createElement("div");
ball.classList.add("ball");
ball.style.left = e.clientX + "px";
ball.style.top = e.clientY + "px";
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
ball.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
document.body.appendChild(ball);
balls.push(ball);
balls.forEach(moveBall);
});
function moveBall(ball) {
TweenMax.to(ball, Math.random() * 2 + 1, {
x: Math.random() * 100 - 50,
y: Math.random() * 100 - 50,
onComplete: function() {
document.body.removeChild(ball);
balls.splice(balls.indexOf(ball), 1);
}
});
}
```
需要注意的是,上述代码中使用了CSS样式来定义小球的外观,需要在HTML或CSS文件中添加如下样式:
```
.ball {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
pointer-events: none;
}
```