Javascript 如何设置进度条的动画'；什么是宽度变化？
我使用文件阅读器将图像加载到html5画布中； 我试图建立一个进度条；它可以工作，但它的行为不是很顺利。。。 我的意思是，酒吧开始从一个0像素的大小，然后增加，但在一个急促的方式； 是否可以增加更平滑的条尺寸 代码：Javascript 如何设置进度条的动画'；什么是宽度变化？,javascript,filereader,Javascript,Filereader,我使用文件阅读器将图像加载到html5画布中； 我试图建立一个进度条；它可以工作，但它的行为不是很顺利。。。 我的意思是，酒吧开始从一个0像素的大小，然后增加，但在一个急促的方式； 是否可以增加更平滑的条尺寸 代码： reader.readAsDataURL(file); function updateProgress(evt) { jQuery('.file-loading-bar').width(100 * (evt.loaded / evt.total) + '%'); } r
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;
.file-loading-bar {
-webkit-transition: width 0.5s;
transition: width 0.5s;
}
下面是一个小示例，我将它放在一起展示如何平滑地插值HTML5
onprogressaddProgress（）setTimeout（）<!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>
平滑进度条
开始
//进度条元素
var bar=document.getElementById（“mybar”）；
//添加侦听器以模拟进度
$（“#开始”）。单击（doProgress）；
//我们的作用是增加进步
函数addProgress（）{
/*
*创建一个动画，该动画将从
*将进度条的当前值更改为实际的新值
*进度条的一部分。
*/
$({
//目前的价值
interval:bar.value
}).制作动画({
//进展发生后的新值
Interval:bar.value+10
},
{
//插值需要多长时间
持续时间：200，
//将进度条的值设置为区间值的函数
步骤：函数（）{
bar.value=this.interval；
}
});
//检查是否应该结束模拟
如果（巴值<巴最大值）{
//如果我们不在max，继续前进
setTimeout（addProgress，2000）；
}
}
//函数来引导我们的进度
函数doProgress（）{
setTimeout（addProgress，500）；
}
-webkitprogress::-webkit-progress-value {
transition:width 1s linear
}
progress[value] {
-webkit-appearance: none;
width: 300px;
height: 30px;
}
用户制作了一个演示了一个进度条，该进度条由
audioonprogress动画