实现小球碰撞动画

前言

小球碰撞的动画效果早在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