动画css进度条而不在更新之间跳转？

Posted 2023-05-07

【中文标题】动画css进度条而不在更新之间跳转？

【英文标题】：Animate css progress bar without jumping between updates?

【发布时间】：2015-02-12 02:52:31

【问题描述】：

我正在我的网站上使用它……

<progress id='video-progress' min='0' max='100' value=''></progress>

这是元素的整个样式……

#video-progress 
    -webkit-appearance: none;
    border: none;
    position:fixed;
    bottom:0;
    left:0;
    height:3px;
    width:100%;
    z-index:1;

所以它所做的只是将页面底部的屏幕宽度从 0 移动到 100%。 进度条通过 javascript 更新。

但是，由于我的视频只有 30 秒长，更新的单个步骤作为进度条的“跳转”执行。 因此没有平滑的条形运动。

知道如何为进度条设置动画或在更新的步骤之间平滑它吗？

更新：

JavaScript……

function updateProgressBar() 
    var progressBar = document.getElementById('video-progress');
    var percentage = Math.floor((100 / fmVideo.duration) * fmVideo.currentTime);
    progressBar.value = percentage;

【问题讨论】：

能否也添加 JavaScript 代码？

能否也添加 JavaScript？

我更新了js代码。

【参考方案1】：

您可以通过使用setInterval 在每个15 millisecond 递增其value 来为其设置动画，如果value 大于percentage 使用clearInterval 则停止递增。

此代码提取当前的value 并将其递增，直到达到percentage 的值。

注意： percentage 手动设置为 70。

var progressBar = document.getElementById('video-progress');

function updateProgressBar() 
  var percentage = 70;
  var curr = progressBar.value;
  var update = setInterval(function() 
    if (curr > percentage) 
      clearInterval(update);
    
    progressBar.value = curr++;
  , 15)


updateProgressBar();

#video-progress 
  -webkit-appearance: none;
  border: none;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 1;

<progress id='video-progress' min='0' max='100' value=''></progress>

【参考方案2】：

这对我来说非常适合！

function smoothProgress(e) 
    var id = $("#"+e.data.id),
        dur = 5000,
        seq = 100,
        max = parseInt( id.attr("max"), 10),
        chunk = max / dur * seq,
        loop = setInterval(function() 
        if( id.val() < max )
            id.val( id.val() + chunk );
        else
            clearInterval(loop);
        
    , seq);

$(document).ready(function() 
    $("#launch").on("click", id: $("progress").attr("id"), smoothProgress);
);

当然，您可以调整dur参数或根据您的视频时长动态检索它，以及seq参数（越低越流畅）。

这是一个fiddle 用于演示。