js如何让高度和宽度保持一致_如何实现一个下载进度条/播放进度条
技术上没太大难度,有难度的地方是怎么让整个动画比较流畅。一个主要问题是动画的滞后性:当下载进度到某个点的时候,你再用250ms的动画过渡过去,这个时候已经慢了,所以很多人可能因为这个原因或者嫌麻烦,直接就不做动画了,在进度事件触发的时候直接更新进度条相应的位置,不过我们可以尝试实现一下。
最后做出来的效果如下图所示:
小狗奔跑的动画是一个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这个字段告知当前文件的总字节数,如下图所示:
一般CDN都会有这个字段。拿到下载进度之后便可用来换算宽度或者位置。
2. 没有动画的loading
如果我们不做动画,直接设置translate位置,那么看起来是这样的:
代码如下所示:
let percentComplete = event.loaded / event.total;let left = containerWidth * percentComplete;// 狗的位置直接设置translatedogBox.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(实测)触发一次,可以不用节流。
效果如下图所示:
我们发现在最后数字已经显示总大小了即已经下载完成了,但是那条狗离终点还有段距离,在我们这个例子似乎没那么明显,不仔细看还看不太出来。但如果下载速度很快的时候这个问题会更加明显,在播放进度条的例子便是如果进度条很长,但是播放的视频只有10几秒,那么应该也会比较明显。
一个简单的解决方法是假定下一个250ms的下载速度保持一致,每次运动的时候都提前运动250ms,如果在播放video的例子里面这个假定几乎是对的,因为比较匀速,而下载速度不可控,但在连续相同很短的时间内我们估且认为是一样。
所以我们可以记录一下上一次的位置,然后加多一个偏移,如下代码所示:
let diffX = (event.loaded - lastMB) / event.total * containerWidth;// 在原本的基础上再加多一个偏移(且不能超过容器的宽度)let left = Math.min(containerWidth, containerWidth * percentComplete + diffX);lastMB = downloadedMB;
这样就比较对得上了,效果如下图所示:
这个案例到这里基本就介绍结束,这个例子比较简单,不过你可能会觉得web animation的兼容性不太好。主要是在Chrome的兼容性比较好,其它主流的浏览器的新版本也已经开始支持了。其它不支持的浏览器可以使用谷歌官方的一个polyfill,就是比较大一点。它和CSS动画一样,但是可以用JS去控制开始暂停等,所以它和CSS动画一样具有GPU加速,不占用JS线程等优势。
作者:人人网FED链接:https://juejin.im/post/5cfcd4c5f265da1bb13f246e
关注我的公众号:前端冒险指南,获取更多资讯
js如何让高度和宽度保持一致_如何实现一个下载进度条/播放进度条相关推荐
- 编辑器js获取浏览器高度和宽度值(转)
js获取浏览器高度和宽度值 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: docume ...
- js 获取浏览器高度和宽度值
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
- js获取网页高度和宽度(备份)
网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offset ...
- 不同浏览器JS获取浏览器高度和宽度
摘自:http://blog.csdn.net/lai_gb/archive/2009/07/04/4320956.aspx IE中: document.body.clientWidth ==> ...
- js 获取浏览器高度和宽度值(兼容多浏览器)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 documen ...
- js获取页面高度和宽度
var winHeight = window.innerHeightvar winWidth = window.innerWidthconsole.log("页面高度:",winH ...
- js 获取浏览器高度和宽度值(多浏览器)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 documen ...
- js设置body高度、宽度为浏览器窗口高度、宽度
window.onload = () => {document.getElementsByTagName("body")[0].style.height = document ...
- html5 audio js控制进度,HTML5多媒体的之audio和video。JavaScript控制进度条播放进度
使用HTML5多媒体,audio和video两个元素可以让用户不必借助flash player插件即可播放音频和视频. 小知识:视频文件包含了音频轨道,视频轨道和其他一些元数据.当我们播放视频的时候, ...
最新文章
- 微信小程序刷新webview页面问题
- 基于python的网站_基于Python的网站爬虫应用研究
- Struts2之异常机制
- 华为这款无线耳机斩获11项IFA大奖,11月正式上市
- BZOJ 1062 糖果雨
- video-audio
- 利润表模板excel_分享用了8年的excel记账系统,一键录入,多表生成,记账很简单...
- AD2017破解步骤
- SPSS因子分析经典案例分享
- VC 消息钩子编程
- STM32神舟III号 驱动直流电机学习(三 )
- 如何在虚拟机上写c语言程序吗,c语言初级(一)——如何在虚拟机里写代码
- js函数传参——参数与arguments对象
- java提取图片文字
- 高等数学:第十一章 无穷级数(1)常数项技术的概念、性质、审敛法、幂级数
- QT之xml文件读写
- R语言威尔科克森符号秩和(Wilcoxon Signed Rank statistic)分布
- javaweb实现支付宝扫码支付完整流程
- ES启动异常:the default discovery settings are unsuitable for production use; at least...
- iPhone 6 Plus 分辨率问题
热门文章
- webstrom常用键
- BZOJ3559 : [Ctsc2014]图的分割
- java之redis篇(spring-data-redis整合)
- oracle 11g ORA-12514
- Silverlight Telerik控件学习:带CheckBox复选框的树形TreeView控件
- yarn的组成部分_图解YARN工作原理
- sql server修改索引名称_【索引潜规则】覆盖索引、ICP、MRR详解
- arduino串口监视器显示nan_使用Arduino开发板制作摩尔斯电码生成器
- 推荐系统算法_机器学习和推荐系统(二)推荐算法简介
- 非常量引用的初始值必须是左值_C++核心编程--引用