Question

我正在使用文件阅读器将图片加载到html5画布中; 我正在努力建立一个进度条;它有效，但它的行为不是很顺利...... 我的意思是酒吧从0像素的大小开始，然后以一种生涩的方式增加; 是否可以使条形尺寸更平滑？

代码：

reader.readAsDataURL(file);

function updateProgress(evt) {
    jQuery('.file-loading-bar').width(100 * (evt.loaded / evt.total) + '%');
}

reader.onloadstart = function() {
    jQuery('.file-loading-bar').width(0);
}

reader.onprogress = updateProgress;

Answer 1

您可以使用CSS3：

.file-loading-bar {
  -webkit-transition: width 0.5s;
          transition: width 0.5s;
}

Answer 2

这是一个小样本，我把它放在一起，以展示如何平滑插值HTML5 <progress>栏的值。它并没有与实际的文件API相关联，因为我不想将巨型文件复制到浏览器缓存中来尝试测试这个东西。但是，重点是每当你有onprogress触发器时，你想要调用addProgress()函数。尽管可以摆脱setTimeout()，因为它们只是模拟进展。

jsFiddle

<强> HTML / JS

<!DOCTYPE html>
<html>
   <head>
      <title>Smooth Progress Bar</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width">
      <script src="js/libs/jquery/jquery.js"></script>
   </head>
   <body>
      <!--Our progress bar-->
      <progress id="mybar" value="20" max="100"></progress>

      <!--Our button to start progress simulation-->
      <button id="start">Start</button>

      <!--Our small script to simulate progress-->
      <script>
         // The progress bar element
         var bar = document.getElementById("mybar");

         // Add a listener to simulate progress
         $("#start").click(doProgress);

         // Our function that causes progress to be added
         function addProgress() {
            /*
             * Create an animation that will interpolate a value from the
             * current value of the progress bar to the actual new value
             * of the progress bar.
             */
            $({
               // The value at present
               interpVal: bar.value
            }).animate({
               // The new value after progress has happened
               interpVal: bar.value + 10
            },
            {
               // How long this interpolation should take
               duration: 200,
               // The function to set the progress bar's value to the inter val
               step: function() {
                  bar.value = this.interpVal;
               }
            });

            // Check to see if we should end our simulation
            if (bar.value < bar.max) {
               // If we aren't at max, keep progressing
               setTimeout(addProgress, 2000);
            }
         }

         // Function to bootstrap our progress
         function doProgress() {
            setTimeout(addProgress, 500);
         }
      </script>
   </body>
</html>

Answer 3

我今晚遇到同样的问题并找到了解决方案 - 这适用于Chrome，因此您可能需要根据需要调整-webkit前缀。测试这个CSS：

progress::-webkit-progress-value {
  transition:width 1s linear
}

progress[value] {
   -webkit-appearance: none;
  width: 300px;
  height: 30px;
}

用户@jbalsas制作了jsfiddle，演示了使用audio元素控制的进度条 - 这是我添加了CSS的更新jsfiddle。（音频加载MP3 ..所以在Chrome中运行它而不是Chromium）根据需要更新CSS样式..还有其他一些关于S.O.的答案。这表明如何添加其他风格。

如何设置进度条宽度变化的动画？

3 个答案:

jsFiddle