两个值之间的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; 
}