实现小球碰撞动画
前言
小球碰撞的动画效果早在17年做一个大屏项目的时候就用过，最近的项目又有这个需求，于是乎把这个过程总结一下，省得以后又从网上找。
常规方案思路梳理
网上的做法大部分都是循环创建一堆dom元素，然后使用随机数设置起点坐标，给小球以x,y方向的初始速度，然后在运动到边界的时候进行判断并转向，还可以判断小球之间是否发生碰撞，最后设置定时器使小球不间断的运动(改变css属性)。
基于vue的代码实现（根据网络上的方法进行了一些细节修改）
首先是设置小球样式和属性
/**
* @description: 设置运动小球的属性
* @param {array} balls 当前层小球数据集合
* @param {object} boxDom 当前层dom对象
* @param {number} num 当前层数
* @return {*}
*/
setBallAttr(balls, boxDom, num) {
const boxWidth = boxDom.offsetWidth;
const boxHeight = boxDom.offsetHeight;
const speed = 0.3; // 小球移动速度
for (let i = 0; i < balls.length; i++) {
const ballDom = document.getElementById(`line${num}Ball_${i}`);
const offsetHeight = ballDom.offsetHeight; // 运动时判断用
const offsetWidth = ballDom.offsetWidth;
const tempObj = {
id: `line${num}Ball_${i}`,
x: this.getRandomNum(0 + offsetWidth, boxWidth - offsetWidth), // 随机起点坐标
y: this.getRandomNum(0 + offsetWidth, boxHeight - offsetWidth),
offsetHeight,
offsetWidth,
speed,
xflag: Math.random() - speed > 0, // 随机生成移动方向
yflag: Math.random() - speed > 0,
style: this.setlineOneBallStyle(num) // 样式
};
const scaleValue = tempObj.style.transform; // transform:scale的值单独取出来
Object.assign(tempObj, {scaleValue});
Object.assign(balls[i], tempObj);
}
}
核心运动函数
/**
* @description: 小球运动函数
* @param {object} boxDom 当前层dom对象
* @param {object} timer 记录interval
* @param {object} ballObj 当前小球对象
* @param {array} balls 当前层小球数据集合
* @param {number} num 当前层数
* @return {*}
*/
moveBallFn(boxDom, timer, ballObj, balls, num) {
const boxWidth = boxDom.offsetWidth;
const boxHeight = boxDom.offsetHeight;
const currentBallDom = document.getElementById(ballObj.id);
const moveFn = () => {
// currentBallDom.style.top = ballObj.y + "px";
// currentBallDom.style.left = ballObj.x + "px";
currentBallDom.style.transform = `translate3d(${ballObj.x}px, ${ballObj.y}px, 0) ${ballObj.scaleValue}`;
//判断小球的标志量，对小球作出相应操作
if (ballObj.yflag) {
//小球向下移动
ballObj.y += ballObj.speed;
if (ballObj.y >= boxHeight - ballObj.offsetWidth) {
ballObj.y = boxHeight - ballObj.offsetWidth;
ballObj.yflag = false;
}
} else {
//小球向上移动
ballObj.y -= ballObj.speed;
if (ballObj.y <= 0) {
ballObj.y = 0;
ballObj.yflag = true;
}
}
if (ballObj.xflag) {
//小球向右移动
ballObj.x += ballObj.speed;
if (ballObj.x >= boxWidth - ballObj.offsetHeight) {
ballObj.x = boxWidth - ballObj.offsetHeight;
ballObj.xflag = false;
}
} else {
//小球向左移动
ballObj.x -= ballObj.speed;
if (ballObj.x <= 0) {
ballObj.x = 0;
ballObj.xflag = true;
}
}
// 数量过多的时候不适合开启小球之间的碰撞判断
// this.crashBallFn(ballObj, balls);
};
timer = setInterval(moveFn, 16);
},
小球间的碰撞判断，当两个小球发生碰撞的时候其实是一个直角三角形的情况，这一点和我在网上找的判断方法不太一样
两球之间的距离.png
/**
* @description: 碰撞函数
* @param {object} ballObj 当前小球对象
* @param {array} balls 当前层小球数据集合
* @return {*}
*/
crashBallFn(ballObj, balls) {
//通过传过来的小球对象来获取小球的X坐标和Y坐标
const x1 = ballObj.x;
const y1 = ballObj.y;
for (let i = 0; i < balls.length; i++) {
//确保不和自己对比
if (ballObj != balls[i]) {
const x2 = balls[i].x;
const y2 = balls[i].y;
// 这里百度出来的判断方法不太靠谱
// 判断位置的平方和小球的圆心坐标的关系(画图理解：两个坐标差代表两个直角边,半径和是斜边)
if (Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2) <= Math.pow(ballObj.offsetWidth/2 + balls[i].offsetWidth/2, 2)) {
//判断传过来的小球对象，相对于碰撞小球的哪个方位
if (ballObj.x < balls[i].x) {
if (ballObj.y < balls[i].y) {
//小球对象在被碰小球的左上角
ballObj.yflag = false;
ballObj.xflag = false;
} else if (ballObj.y > balls[i].y) {
//小球对象在被碰小球的左下角
ballObj.xflag = false;
ballObj.yflag = true;
} else {
//小球对象在被撞小球的正左方
ballObj.xflag = false;
}
} else if (ballObj.x > balls[i].x) {
if (ballObj.y < balls[i].y) {
//小球对象在被碰撞小球的右上方
ballObj.yflag = false;
ballObj.xflag = true;
} else if (ballObj.y > balls[i].y) {
//小球对象在被碰撞小球的右下方
ballObj.xflag = true;
ballObj.yflag = true;
} else {
//小球对象在被撞小球的正右方
ballObj.xflag = true;
}
} else if (ballObj.y > balls[i].y) {
//小球对象在被撞小球的正下方
ballObj.yflag = true;
} else if (ballObj.y < balls[i].y) {
//小球对象在被撞小球的正上方
ballObj.yflag = false;
}
}
}
}
}
最后最好在组件销毁之前清除定时器。
碰到的一些问题
1.小球数量过多的时候开启小球间的碰撞检测会使动画有些鬼畜，我在项目里是把它关闭了，即小球运动的时候可以重叠。暂时没想到更好的办法。
2.mac上的chrome以及一些可用内存较低的win平台电脑上动画有卡顿，我的项目里页面上小球运动的区域有很多个，所以计算量比较大。
尝试过的解决办法
a.使用transform而不是改变width，height或者定位(想办法通过js保存transform已经设置好的属性然后与translate拼接)，并开启硬件加速（translate3d），实际效果：几乎察觉不到变化。
b.使用requestAnimationFrame 取代 setInterval。实际效果：几乎没有视觉上的优化，而且由于代码结构的原因，所有小球的运动方向都变成相同了。
c.对动画元素使用will-change属性，这是真·硬件加速。实际效果：如丝般顺滑。
但是这个属性也不能滥用，如果不是无限动画最好在动画结束后为目标元素去除该属性。参考 https://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/
另一种实现
一个后台小伙伴根据stackoverflow上的内容写出来的基于canvas的实现，加入了加速度和向量计算，使运动效果更加自然。（和上面那种比起来简直是质的飞跃）
我根据他的代码稍加修改了一些，代码放在这里了
https://github.com/dwtom/tools/blob/master/ballsCollision.html
