亲宝软件园·资讯

展开

JS进度条顺滑版实现

mrr 人气:0
想了解JS进度条顺滑版实现的相关内容吗,mrr在本文为您仔细讲解的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:JS进度条顺滑版,下面大家一起来学习吧。

进度条不顺滑

相信大多前端同学都自己写过音频、视频播放器,实现并不复杂。最近在小程序里,做了一个类似微博刷视频的需求。其中有一部分功能需要实现自定义进度条,在做完第一版之后发现进度条不顺滑,而后想查查网上看有没有什么好的方案,但最终没找到合适的。于是想看看微信小程序里的“微博”进度条如何,结果也是很生硬的动画,下面放了一个GIF,大家也可以自己搜索微信小程序的微博,找个视频看看效果。

常规方案

最终决定还是优化一下这个问题,先来捋一捋我们现有常规方案。

监听TimeUpdate事件获取到当前播放时间,通过总时间计算进度百分比(currentTime / duration * 100)进度条width属性设置进度百分比

现有的方案是依赖事件获取当前播放时间,而这个事件大概在100~350毫秒触发一次,下面是我记录的小程序的事件对象队列。

[ {"detail":{"currentTime":0.10509,"duration":5.83}}, {"detail":{"currentTime":0.364527,"duration":5.83}}, {"detail":{"currentTime":0.613648,"duration":5.83}},]

目前的问题在于,每次获取到事件,就会更新进度条,没有过度动画效果,非常的生硬,下面是一个5s总时长的进度条变化过程:

核心代码:

const onProgress = (e, $dom) => { const updateFunc = (percent) => { $dom.style.width = percent+'%' } let percent = ((e.detail.currentTime / e.detail.duration) * 100).toFixed(1) updateFunc(percent)}
transition

我们能很快想到用CSS的动画属性来做优化,想要灵活的控制,我选择使用 transition。transition可以定义动画执行时长,当我们改变width时,transition就会在规定时间内用动画的方式改变进度条宽度。首先动画执行时长一定要固定,并且在上一个执行时长结束之前最好不要再对width做改动,否则会导致冲突,动画会变得很奇怪。

选择一个合理的transition执行时间:0.5s根据当前总时长,求出0.5s在进度条中所属百分比(100/duration/2)第一次TimeUpdate事件,就执行width改变,把进度条设置到0.5s的位置:width = 100/duration/2非第一次TimeUpdate事件,每当currentTime超过上一次进度条位置,就更新当前进度条百分比

听起来有点不好理解,我们画个图:

当第一次触发TimeUpdate事件,0.1336秒的时候(当然这个值随机的,可能是0.1~0.3之间),我们就设置width到0.5s的位置,这样进度条就和视频同步在运动,和真实的进度相差微弱的0.1秒。在动画执行的0.5s之间,UpdateTime也会有多次触发,当某次UpdateTime的currentTime(0.7123s,这个值也是随机的)值大于上次执行的0.5s时,这个时候进度条的位置大概也在0.5s周围,我们再次触发下一个0.5s动画,也就是把width设置为1s的进度条位置而后下个迭代currentTime>1s,width设置为1.5s,这样循环下去。

核心代码:

const playControl = { percent: 0, time: 0, duration: 0, first: true}const onProgress = (e, $dom) => { const updateFunc = (percent) => { playControl.percent = percent playControl.time = e.detail.currentTime $dom.style.width = percent+'%' } //当前视频进度第一次更新 if (playControl.first) { playControl.duration = e.detail.duration playControl.first = false updateFunc(100 / e.detail.duration / 2) } else { let percent = ((e.detail.currentTime / e.detail.duration) * 100).toFixed(1) if (percent - playControl.percent > 0 || e.detail.currentTime >= e.detail.duration) { updateFunc(percent) } }}
最终效果对比(PS:gif图效果有折损)

60s版本看起来和普通版差不多?把另一个60s挡住,来回对比,会发现还是有些区别。

解释起来还是有点费劲,还是没看明白?直接去看github仓库代码,代码可直接运行:https://github.com/zimv/smooth-progress

此方案在部分场景下会有短暂延迟,比如暂停、拖动等,​个人总体觉得利大于弊。

有没有人打赏?没有的话,那我晚点再来问问。 关注大诗人公众号,第一时间获取最新文章。 如果你有购买钢琴的打算,可以从这里了解到在售信息,价格实惠品质保障。
---转发请标明,并添加原文链接---

加载全部内容

相关教程
猜你喜欢
用户评论