javascript - 我该怎么办：“按下录制按钮时，按钮会闪烁”

Question

我正在Android系统上使用PhoneGap开发语音记录器功能。我正在对 Transformer Prime 进行测试。我在 PhoneGap 的 JavaScript 之上使用 jQuery 和 jQuery UI。

我的问题是：当用户按下录制按钮时，如何使该按钮闪烁以指示应用程序正在录制？

当然，我要创建的效果是让用户知道它仍在录制。也许我可以设置一个计时器来给出当前的录音持续时间，或者类似的东西。

不幸的是，我不知道其中一种效果。谁能给我一个关于源代码的建议，以便我可以作为参考？

Answer 1

您可以为此使用 CSS：http: //jsfiddle.net/fszhJ/。有一个关键帧，将元素设置为前半部分不可见，而另一半部分可见。（您可能需要添加其他前缀，而不仅仅是-webkit-.）

@-webkit-keyframes keyframe {
    from {
        visibility: hidden;
    }
    50% {
        visibility: hidden;
    }
    to {
        visibility: visible;
    }
}

div {
    width: 200px;
    height: 200px;
    background-color: black;
    -webkit-animation: keyframe 1s infinite;
}​

Answer 2

如果您使用 jQuery，您可以在录制按钮上方放置一个发光 png（最初不透明度为 0），在间隔动画中您可以这样做：

 isVisible = false;

 var interval = setInterval(function(){

     opacityValue = isVisible ? 0 : 1;
     glow.css( 'opacity',  opacityValue );
     isVisible = !isVisible;

 }, 500);

然后，当你想停止它时：

 clearInterval( interval );

如果你想让你的光晕看起来很流畅，你可以使用 css 过渡。