让小球做圆周运动，你有几种办法？

最近在阅读外国技术文章中无意中发现了一个神奇的CSS属性motion-path，它可以让Dom元素可以按照自定义的路径移动。

又想起了很久之前参加校招面试的时候，面试官问了我一个问题“能不能不借助库实现小球在浏览器中做圆周运动？”，于是就整理了一下让小球圆周运动的方法（纯属无聊不喜勿喷）。

因为之前的题目过于简单，作为一个需求来说缺少了一些必要条件，于是，我们给它增加一些条件，让他看起来更靠谱些。

在浏览器中间600px*600px的指定区域内，不借助任何第三方插件，利用原生JavaScript或者CSS让一个半径为25px的小球围绕指定区域的中心做圆周运行，你有几种方法？

在让小球进行圆周运动之前，让我们先来实现一下题目中提到的基础样式，剧中的容器、半径25px的小球。

.container {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -300px 0 0 -300px;
    width: 600px;
    height: 600px;
    background: lightgray;
}

.ball {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: coral;
}

基础样式很容易就完成了，我们再来思考一下实现圆周运动的具体方法。我们可以将解决方法分为CSS和JavaScript两大类。

CSS方法

方法1: 双Dom元素，父元素使用animation属性

<div class="container">
    <div class="inner-container">
        <div class="ball"></div>
    </div>
</div>

.inner-container {
    width: 600px;
    height: 600px;
    animation: rotate 8s linear infinite;
}

.ball {
    margin: 0 auto;
}

@keyframes rotate {
    to {
        transform: rotate(1turn);
    }
}

上面的方法属于很容易想到的一种方法，这里我们利用了animation属性，一直循环播放定义好的keyframe动画rotate即可。

仅仅通过animation和transform属性让外层元素旋转起来，视觉效果上看起来就是小圆球在旋转。为了让效果明显，我们把外层元素的背景色弄的明显一些。

方法2: 单Dom元素，修改transform-origin

如果是单个Dom元素，我们怎么才能让小球做圆周运动呢。如下图，A点围绕O点移动一定的角度到达B点，我们不断扩大转动的角度即可实现圆周运动。

我们只需要让我们的圆围绕着某一个中心点旋转就可以了。而CSS中刚好提供了这样一个属性transform-origin，让我们能够修改DOM节点的中心点。

在我们的基础样式中，在.ball上增加transform-origin: 300px center;属性，就可以帮我们把旋转的圆心向右移动300px（图中红色区域）。

再通过上面实现的旋转动画，即可实现圆周运动。具体实现代码如下：

<div class="container">
    <div class="ball"></div>
</div>

.ball {
    top: 50%;
    margin-top: -25px;
    transform-origin: 300px center;
    animation: rotate 8s linear infinite;
}

@keyframes rotate {
    to {
        transform: rotate(1turn);
    }
}

方法3: motion path

前面两个方法相对比较常见，我们的第三种方法将会用到前面提到css属性motion path。

我们的题目中是在圆周运动，因此，还可以单纯通过animation和transform属性来完成效果，如果我们的题目变更成了要去实现一条复杂的曲线就会很僵硬，比如下面的路径。

为了解决上面的问题，2015年W3C提出了CSS路径动画相关的草案，也就是我们现在准备要使用的motion path。其中包括了5个属性：

offset-path：运动路径
offset-anchor：运动元素的锚点位置
offset-position：定了路径本身的初始位置
offset-distance：运动元素在路径上的位置
offset-rotate：对象的旋转角度或是如何自动旋转

其中，offset-path接收path()、url()、ray()、none等值。这里的path()是使用SVG坐标语法定义的路径字符串。那我们的问题就变得简单了，只需要找到在svg中如何实现圆环路径即可。

下面是我们找到的SVG中实现一个圆环路径的代码，其中cx、cy代表圆形的坐标, r代表圆的半径，填入对应的值即可生成我们想要的圆环路径M 300, 300 m -275, 0 a 275,275 0 1,0 550,0 a 275,275 0 1,0 -550,0。

<path d="
    M cx cy
    m -r, 0
    a r,r 0 1,0 (r * 2),0
    a r,r 0 1,0 -(r * 2),0
"/>

在实现完轨迹之后，我们还需要通过控制offset-distance的值让我们的圆在我们画出来的圆环路径上动起来。

具体实现代码如下：

<div class="container">
    <div class="ball"></div>
</div>

.ball {
    offset-path: path('M 300, 300 m -275, 0 a 275,275 0 1,0 550,0 a 275,275 0 1,0 -550,0');
    animation: move 3000ms linear infinite;
}

@keyframes move {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}

Javascript方法

方法4: requestAnimationFrame + Dom

我们来到了JavaScript环节，通过万能的JS我们只需要掌握一点点数学知识和定时器知识即可实现我们的小球运动啦~

这里实现时有2个需要注意的点：

实现动画播放时，为什么用requestAnimationFrame不用setInterval?
改变圆的位置时，为什么不直接修改top和left，而是要修改transform?

问题1: 实现动画播放时，为什么用`requestAnimationFrame`不用`setInterval`?

为了保证动画运行流畅性，我们需要尽量保持动画的播放帧率大于等于60Hz，即1000 / 60 = 16.67ms播放一次动画，requestAnimationFrame和setInterval都可以控制动画渲染的间隔。

但是，setInterval本身是基于时间来设置，它仅仅是将需要执行的事件定期插入到需要执行的队列中，不管，前面的事件是否已经执行了。因此，可能存在多次定时器之间的间隔可能小于我们设定的值，导致动画执行过快或者直接跳帧。

而requestAnimationFrame则是告知浏览器在刷新下一帧时需要执行那些函数。确保我们的动画的播放帧率和屏幕的刷新帧率一致。

问题2: 改变圆的位置时，为什么不直接修改`top`和`left`，而是要修改`transform`?

直接修改top和left会触发浏览器的重排和重绘，而修改tranform仅仅会触发重绘。而频繁的重排对动画性能影响极大，具体原因大家可以百度一下浏览器重排重绘，相关的文章非常多。

另外想要查看自己的页面是否触发了重排、重绘，大家可以借助chrome的rendering面板来查看

说了这么多，我们来看一下使用requestAnimationFrame怎么实现圆周运动的动画，具体实现代码如下：

<div class="container">
    <div id="ball" class="ball"></div>
</div>

let $ball = document.querySelector('#ball');
let angle = 0;
let getPosition = ((centerX, centerY, radius) => {
    return (angle) => {
        return {
            x: +centerX + Math.cos(angle) * radius,
            y: +centerY + Math.sin(angle) * radius,
        };
    };
})(275, 275, 275);

run();

function run() {
    // 角度加1
    angle += 1;
    let position = getPosition((angle * Math.PI) / 180);
    $ball.style.transform = `translate(${position.x}px, ${position.y}px)`;
    window.requestAnimationFrame(run);
}

方法5: requestAnimationFrame + canvas

除了通过Dom来控制元素之外，我们还可以通过canvas直接在页面上画圆。canvas做动画的原理就是快速的重复“擦除->移动位置画圆”的这个步骤。这里就不解释为啥了，直接上代码

具体实现代码如下：

<div class="container">
    <canvas id="canvas" width="600px" height="600px"></canvas>
</div>

let angle = 0;
let getPosition = ((centerX, centerY, radius) => {
    return (angle) => {
        return {
            x: +centerX + Math.cos(angle) * radius,
            y: +centerY + Math.sin(angle) * radius,
        };
    };
})(300, 300, 275);

let $canvas = document.querySelector('#canvas');
let ctx = $canvas.getContext('2d');
// 设置填充色
ctx.fillStyle = 'coral';

run();

function run() {
    angle += 1;
    let position = getPosition((angle * Math.PI) / 180);

    //清空画布
    ctx.clearRect(0, 0, 600, 600);
    ctx.beginPath();
    // 画圆
    ctx.arc(position.x, position.y, 25, 0, 2 * Math.PI, true);
    //填充
    ctx.fill();
    ctx.closePath();

    window.requestAnimationFrame(run);
}

好啦，打完收工，这里就是我能想到的让小球做圆周运动的5种方法。

如果还有别的方法可以留言交流一下，一起涨涨姿势。

关于我

我是一个莫得感情的代码搬运工，每周会更新1至2篇前端相关的文章，有兴趣的老铁可以扫描下面的二维码关注或者直接微信搜索前端补习班关注。

精通前端很难，让我们来一起补补课吧！