兩個值之間的Ocillate函數javascript

Question

我需要在javascript中製作一個增長和減少的圓圈。 我的想法是使用格與

border-radius : 50% 

要得到一個圓。我需要每隔[x]秒將其從0.2縮放到1。

它在5秒內從0.2增長到1，然後在5秒內從1減少到0.2。運動再次開始。 我想我必須使用sin或cos函數，但我不知道如何根據時間獲得這個間隔。

我需要它與JavaScript計時函數耦合，以便當我提出一個計時器時，動畫開始，當我暫停它時，它暫停動畫。

感謝您的諮詢！

Answer 1

你可以用CSS3動畫做到這一點。看看這個例子，並改變它，直到它完全按照你的想法。

#circle { 
 
    -webkit-animation: oscillate 10s infinite; 
 
    animation: oscillate 10s infinite; 
 
    border: 1px solid black; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 
@-webkit-keyframes oscillate { 
 
    0% { border-radius: 20%; } 
 
    50% { border-radius: 100%; } 
 
    100% { border-radius: 20%; } 
 
} 
 
@keyframes oscillate { 
 
    0% { border-radius: 20%; } 
 
    50% { border-radius: 100%; } 
 
    100% { border-radius: 20%; } 
 
}

<div id="circle">Hi</div>

Answer 2

CSS動畫這可能是更好的選擇的又一個例子那麼的javascript：

.circle { 
 
    background: coral; 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 50%; 
 
    -webkit-animation: pulse 1s ease infinite alternate; 
 
    animation: pulse 1s ease infinite alternate; 
 
} 
 
@-webkit-keyframes pulse { 
 
    from { 
 
     -webkit-transform: scale(1); 
 
    } 
 
    to { 
 
     -webkit-transform: scale(.2); 
 
    } 
 
}

<div class="circle"></div>

對於Firefox，你將需要添加prefixless規則

@keyframes pulse { 
    from { transform: scale(1); } 
    to { transform: scale(.2); } 
} 

Answer 3

使用無限的CSS3動畫集。檢查這fiddle。

@-webkit-keyframes mymove { 
    0%, 100% { -webkit-transform: scale(1); } 
    50% { -webkit-transform: scale(0.2); } 
} 
@keyframes mymove { 
    0%, 100% { transform: scale(1); } 
    50% { transform: scale(0.2); } 

} 
div { 
    width: 100px; 
    height: 100px; 
    background: red; 
    position: relative; 
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */ 
    animation: mymove 5s infinite; 
    border-radius:60px; 
}