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 相关文章推荐
[IE&FireFox兼容]JS对select操作
Jan 07 Javascript
Javascript this 的一些学习总结
Aug 31 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 Javascript
浅谈Vue 自动化部署打包上线
Jun 14 Javascript
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
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 全角转半角实现代码
2010/05/16 PHP
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
smarty内置函数section的用法
2015/01/22 PHP
php导入模块文件分享
2015/03/17 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
js文件中调用js的实现方法小结
2009/10/23 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
Python可迭代对象操作示例
2019/05/07 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
Java基础知识面试题
2014/03/25 面试题
法律系毕业生自荐信范文
2014/03/27 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers
redis数据结构之压缩列表
2022/03/21 Redis