Animar a barra de progresso do css sem saltar entre as atualizações?

9

Estou usando isso no meu site…

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

Este é todo o estilo do elemento…

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

Portanto, tudo o que você faz é mover de 0 a 100% da largura da tela na parte inferior da página. A barra de progresso é atualizada via Javascript.

No entanto, como meu vídeo tem apenas 30 segundos, as etapas únicas das atualizações são executadas como "saltos" para a barra de progresso. Portanto, não há movimento suave da barra.

Alguma ideia de como eu poderia animar a barra de progresso ou suavizar entre as etapas atualizadas?

ATUALIZAÇÃO:

JavaScript…

function updateProgressBar() {
    var progressBar = document.getElementById('video-progress');
    var percentage = Math.floor((100 / fmVideo.duration) * fmVideo.currentTime);
    progressBar.value = percentage;
}
    
por matt 13.12.2014 в 15:25
fonte

2 respostas

2

Você pode animá-lo incrementando seu value a cada 15 millisecond usando setInterval e parará de incrementar se value for maior que percentage usando clearInterval .

Este código extrai o atual value e o incrementa até atingir o valor percentage .

Observação: percentage é definido manualmente como 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>
    
por Weafs.py 13.12.2014 / 15:44
fonte
1

Isso funciona perfeitamente para mim!

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

Claro, você pode ajustar o parâmetro dur ou recuperá-lo dinamicamente com base na duração do seu vídeo, bem como no parâmetro seq (o mais baixo, o mais suave).

Aqui está um violino para demonstração.

    
por Marventus 13.12.2014 / 16:29
fonte