HTML5进度条动画 [英] HTML5 progress bar animation

问题描述

我在我的应用中使用HTML5进度条。我想知道是否有任何方法可以控制进度条的动画速度。我想在一定的时间间隔后显示进度，我使用javascript的setTimeout方法，以便在屏幕渲染后设置值。但动画太快了。有没有办法控制它？

I am using an HTML5 progress bar in my app. I would like to know if there is any way to control the animation speed of the progress bar. I want to show the progress after a certain interval, which I did using the setTimeout method of javascript so that it sets the value after the screen has been rendered. But the animation is too fast. Is there any way to control it?

谢谢。

推荐答案

我不确定我明白什么你的意思是动画，但这是一个在控制进展速度的同时使用进度条的例子： http://jsfiddle.net/526hM/

I'm not sure I understand what you mean by "animation" but here is an example of using the progress bar while controlling the speed of progression: http://jsfiddle.net/526hM/

Html：

<progress max="200" value="1"></progress>
<div id="val"></div>

脚本：

$(document).ready(function(){
    var interval = 2, //How much to increase the progressbar per frame
        updatesPerSecond = 1000/60, //Set the nr of updates per second (fps)
        progress =  $('progress'),
        animator = function(){
            progress.val(progress.val()+interval);
            $('#val').text(progress.val());
            if ( progress.val()+interval < progress.attr('max')){
               setTimeout(animator, updatesPerSecond);
            } else { 
                $('#val').text('Done');
                progress.val(progress.attr('max'));
            }
        }

    setTimeout(animator, updatesPerSecond);
});

这篇关于HTML5进度条动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！