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

最近在阅读外国技术文章中无意中发现了一个神奇的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属性让外层元素旋转起来，视觉效果上看起来就是小圆球在旋转。为了让效果明显，我们把外层元素的背景色弄的明显一些。