JS驱动N多元素做折向运动

马黑黑 · 发表于 2022-7-10 19:18

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

先上代码：

<style>
#papa {
margin: auto;
width: 1024px;
height: 600px;
box-shadow: 4px 4px 30px #000;
position: relative;
}
.ball {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: #111 linear-gradient(tan,purple);
transition: all 1s;
}
</style>
<div id="papa"></div>
<script>
let all = 20; //运动元素总数
let pa_w = papa.offsetWidth, pa_h = papa.offsetHeight; //父元素宽高
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min; //取两数间随机整数
//初始化运动元素
Array.from({length:all}).forEach((x,y) =>{
x = document.createElement('span'); //创建span标签
x.className = 'ball'; //css类名
let wh = num(10,40); //元素随机尺寸(宽高一致)
//写入 style 样式：背景、宽、高、左边值、上边值
x.style.cssText = `background: linear-gradient(120deg, rgb(${num(0,255)},${num(0,255)},${num(0,255)}),rgb(${num(0,255)},${num(0,255)},${num(0,255)}));
width: ${wh}px; height:${wh}px; left: ${num(0, pa_w - wh)}px; top: ${num(0, pa_h - wh)}px`;
papa.appendChild(x); //追加元素到父元素
});
let balls = document.querySelectorAll('.ball'); //获得已追加的元素操作句柄（数组）
move(); //首次运行函数：一开始就动起来
//折向运动函数
function move() {
for(obj of balls) { //用for of 语句命令每一个元素
let xx = Math.floor((papa.offsetWidth - obj.offsetWidth) * Math.random()); //水平位移距离：范围内随机整数
let yy = Math.floor((papa.offsetHeight - obj.offsetHeight) * Math.random());//垂直位移距离：范围内随机整数
obj.style.left = xx + 'px'; //运动元素左边值
obj.style.top = yy + 'px'; //运动元素右边值
}
}
let tt = setInterval(move, 1000); //永动定时器驱动函数
</script>

复制代码

一点说明：所谓折向运动，说的是，运动对象移动到既定边界时硬转向。CSS里，仅一点需要说明：.ball 选择器的 transition 规范了对象在两点间移动的速率。HTML没什么可说的。JS代码中，生成N多个元素的做法只是实现形式不同与以往的方式，原理却是一样的；折向运动函数可以仔细研究，如有可能可以略加修改，为自己所用。

对象的运动效果非平滑衔接，就是说两次运动间是有停顿的。我想，JS要实现多向性的平滑运动，机制的复杂性应该不是几行代码可以处理的了的，平滑多向运动还是借助CSS的关键帧比较好，或者可以转向画布或svg。