Question

我需要在javascript中制作一个不断增长和减少的圈子。我的想法是使用带

的div

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更好的选择：

＆＃13;

.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);
    }
}

＆＃13;

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

＆＃13;

对于Firefox，您需要添加无前缀规则

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

两个值javascript之间的振荡函数

3 个答案: