讓小球作圓周運動，你有幾種辦法？

最近在閱讀外國技術文章中無心中發現了一個神奇的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

 

好啦，打完收工，這裏就是我能想到的讓小球作圓周運動的幾種方法。

若是還有別的方法能夠留言交流一下，一塊兒漲漲姿式。