JS中实现一个下载进度条及播放进度条的代码


Posted in Javascript onJune 10, 2019

术上没太大难度,有难度的地方是怎么让整个动画比较流畅。一个主要问题是动画的滞后性:当下载进度到某个点的时候,你再用250ms的动画过渡过去,这个时候已经慢了,所以很多人可能因为这个原因或者嫌麻烦,直接就不做动画了,在进度事件触发的时候直接更新进度条相应的位置,不过我们可以尝试实现一下。

最后做出来的效果如下图所示:

JS中实现一个下载进度条及播放进度条的代码 

小狗奔跑的动画是一个lottie动画,来自 codepen 。

1. 获取下载进度

ajax里面可以拿到下载进度,如下代码所示:

let xhr = new XMLHttpRequest();
 const downloadUrl = 'installer.dmg';
 xhr.open('GET', downloadUrl, true);
 xhr.addEventListener('progress', function (event) {
  // 响应头要有Content-Length
  if (event.lengthComputable) {
   let percentComplete = event.loaded / event.total;
   console.log(percentComplete); // 最后输出1
  }
 }, false);
 xhr.send();

前提是响应头里面有Content-Length这个字段告知当前文件的总字节数,如下图所示:

JS中实现一个下载进度条及播放进度条的代码 

一般CDN都会有这个字段。拿到下载进度之后便可用来换算宽度或者位置。

2. 没有动画的loading

如果我们不做动画,直接设置translate位置,那么看起来是这样的:

JS中实现一个下载进度条及播放进度条的代码 

代码如下所示:

let percentComplete = event.loaded / event.total;
let left = containerWidth * percentComplete;
// 狗的位置直接设置translate
dogBox.style.transform = `translateX(${left}px)`;
// 进度条的位置也是translate,一开始是用translateX(-100%)挪到外面去
currentProgressBar.style.transform = `translateX(${percentComplete * 100 - 100}%)`;
在我们这个例子里面会显得特别突兀,一卡一卡的感觉,如果没有上面那条狗可能还会好一点。所以我们给它加个transform动画。

3. 加上transform动画

transform动画怎么做呢?方法有很多:jQuery的animate、Web Animation、requestAnimationFrame、CSS动画结合JS控制、其它第三方动画库等等,我比较喜欢用原生Web Animation。

由于progress event触发得比较快,加上做动画的话不需要触发得那么快,所以给它加一个节流。如下代码所示:

// 最快250ms触发一次
function throttle (func, limit = 250) {
 let inThrottle = false;
 return function() {
  const args = arguments;
  const context = this;
  if (!inThrottle) {
   func.apply(context, args);
   inThrottle = true;
   setTimeout(() => inThrottle = false, limit);
  }
 }
}
function onDownloadProgress (event) {
 
}
xhr.addEventListener('progress', throttle(onDownloadProgress));

当然你不加节流也是可以的,这里只是一个优化。

做transform动画的逻辑便在上面的onDownloadProgress这个函数里面处理,如下代码所示:

function onDownloadProgress (event) {
 let currentProgressBar = document.querySelector('.current-progress-bar');
 let dogBox = document.querySelector('.dog-box');
 let containerWidth = document.querySelector('.progress-bar').clientWidth;
 
 if (event.lengthComputable) {
  let percentComplete = event.loaded / event.total;
  let left = containerWidth * percentComplete;
  // 动画时间和节流时间保持一致
  const time = 250;
  // 获取到当前运动的位移
  let lastTransform = window.getComputedStyle(dogBox).transform || 'translateX(0)';
  // 使用原生web animation
  dogBox.animate({
   transform: [lastTransform, `translateX(${left}px)`]
  }, {
   easing: 'linear',
   fill: 'forwards',
   duration: time
  });
  // 进度条类似,省略
 }
}

上面动画的时间为250ms和节流的时间保持一致,这样下次触发的时候上次的动画差不多刚好做完(实际上是慢了一点)。并且每次触发动画的时候都是获取当前的translate位置,做为本次动画的起点,这样可以保证动画的连贯性。

另外,由于我们使用了节流很可能会导致最后的那次100%的触发丢了,所以需要在完成的时候手动调一下onProgressDownload,否则会没有完成态。

如果是播放进度条的例子,需要监听video/audio元素的timeupdate事件,这个事件的触发约 250ms (实测)触发一次,可以不用节流。

效果如下图所示:

JS中实现一个下载进度条及播放进度条的代码 

我们发现在最后数字已经显示总大小了即已经下载完成了,但是那条狗离终点还有段距离,在我们这个例子似乎没那么明显,不仔细看还看不太出来。但如果下载速度很快的时候这个问题会更加明显,在播放进度条的例子便是如果进度条很长,但是播放的视频只有10几秒,那么应该也会比较明显。

一个简单的解决方法是假定下一个250ms的下载速度保持一致,每次运动的时候都提前运动250ms,如果在播放video的例子里面这个假定几乎是对的,因为比较匀速,而下载速度不可控,但在连续相同很短的时间内我们估且认为是一样。

所以我们可以记录一下上一次的位置,然后加多一个偏移,如下代码所示:

let diffX = (event.loaded - lastMB) / event.total * containerWidth;
// 在原本的基础上再加多一个偏移(且不能超过容器的宽度)
let left = Math.min(containerWidth, containerWidth * percentComplete + diffX);
lastMB = downloadedMB;

这样就比较对得上了,效果如下图所示:

JS中实现一个下载进度条及播放进度条的代码 

这个案例到这里基本就介绍结束,这个例子比较简单,不过你可能会觉得web animation的兼容性不太好。主要是在Chrome的兼容性比较好,其它主流的浏览器的新版本也已经开始支持了。其它不支持的浏览器可以使用谷歌官方的一个 polyfill ,就是比较大一点。它和CSS动画一样,但是可以用JS去控制开始暂停等,所以它和CSS动画一样具有GPU加速,不占用JS线程等优势。

总结

以上所述是小编给大家介绍的JS中实现一个下载进度条及播放进度条的代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jQuery实现单行文字间歇向上滚动源代码
Jun 02 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
javascript 操作cookies详解及实例
Feb 22 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
原生JavaScript实现换肤
Feb 19 Javascript
vuex 中插件的编写案例解析
Jun 10 #Javascript
使用webpack搭建vue项目及注意事项
Jun 10 #Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 #Javascript
前端路由&webpack基础配置详解
Jun 10 #Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 #Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 #Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 #Javascript
You might like
一个用php实现的获取URL信息的类
2007/01/02 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
javascript Excel操作知识点
2009/04/24 Javascript
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
js实现双色球效果
2020/08/02 Javascript
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
python基于phantomjs实现导入图片
2016/05/13 Python
浅谈python中set使用
2016/06/30 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
python计算列表内各元素的个数实例
2018/06/29 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
上班早退检讨书
2014/01/09 职场文书
美术教师个人工作总结
2015/02/06 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
python pygame入门教程
2021/06/01 Python