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

最近在阅读外国技术文章中无心中发现了一个神奇的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方法

方法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);
    }
}

 

如何实现小球在浏览器指定区域内作圆周运动呢？

方法2：css，一个dom元素，animation，transform-origin

 

方法3: motion path

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

咱们的题目中是在圆周运动，所以，还能够单纯经过animation和transform属性来完成效果，若是咱们的题目变动成了要去实现一条复杂的曲线就会很僵硬，好比下面的路径。

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%;
    }
}

 

如何实现小球在浏览器指定区域中作圆周运动呢？

方法：motion-path

 

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

若是还有别的方法能够留言交流一下，一块儿涨涨姿式。