JS实现进度条顺滑版详细方案

2024-02-11 11:38:11

进度条不顺滑

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

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

到此这篇关于JS实现进度条顺滑版详细方案的文章就介绍到这了,更多相关JS进度条顺滑版内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

原生js实现的移动端可拖动进度条插件功能详解

本文实例讲述了原生js实现的移动端可拖动进度条插件功能.分享给大家供大家参考,具体如下: 该插件最初的想法来自网上的一篇文章,直达链接://www.jb51.net/article/167717.htm 笔者因为业务需要寻找到这个插件,然后拿来用之,发现各种不方便,然后便开始了改造之路. 上代码: <script> function dragSlide(id) { this.minDiv =document.getElementById(id); //小方块 this.width = pars
JS实现可控制的进度条

写在前面进度条一直以来都是很多地方都可以用的,那么很多的时候其实我们都是自己在网上找代码,直接使用的,很少有人自己写源码的,今天呢我们就简单的实现一个进度条的效果,没有做美化,喜欢做美化的可以自己做一下美化. 源码已经放到Github上:进度条源码一如既往的看效果: 好吧,效果还是一如既往的丑,简单的说一下怎么实现这样的效果,还是和之前一样我们分析一下难点在哪? 第一:进度条是生成的,那么就意味着div的宽度是不定的. 第二:百分比是动态的,就意味着是计算出来的. 第三:每次的改变,百分比都
JS+html5实现异步上传图片显示上传文件进度条功能示例

本文实例讲述了JS+html5实现异步上传图片显示上传文件进度条功能.分享给大家供大家参考,具体如下: <html> <head> </head> <body> <p> emo_album_id:<input type="text" name="emo_album_id" id="emo_album_id" value='1'> </p> <p> na
JS中实现一个下载进度条及播放进度条的代码

术上没太大难度,有难度的地方是怎么让整个动画比较流畅.一个主要问题是动画的滞后性:当下载进度到某个点的时候,你再用250ms的动画过渡过去,这个时候已经慢了,所以很多人可能因为这个原因或者嫌麻烦,直接就不做动画了,在进度事件触发的时候直接更新进度条相应的位置,不过我们可以尝试实现一下. 最后做出来的效果如下图所示: 小狗奔跑的动画是一个lottie动画,来自 codepen . 1. 获取下载进度 ajax里面可以拿到下载进度,如下代码所示: let xhr = new XMLHttpReque
vue.js+ElementUI实现进度条提示密码强度效果

要求一:判断输入的字符串是否包含数字.小写字母.大写字母以及特殊字符四种内容的8-20位字符通过搜索了解到可以使用?=这个正则语法判断字符串中是否含有多种内容.(?=)这个语法结构在正则里表示"设定后面是"的意思,举下面几个例子进一步了解?=这个语法: (?=.*[a-zA-Z]) 这句的意思就是后面必须有一位大写或小写字母 (?=.*[1-9]) 这句的意思是后面必须有一位数字 (?=.*[\W]) 这句的意思是后面必须有一个非字母数字及下划线的特殊符号 (?!.*[\u4E00
js+HTML5 canvas 实现简单的加载条(进度条)功能示例

本文实例讲述了js+HTML5 canvas 实现简单的加载条(进度条)功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>www.jb51.net canvas实现加载条动画</title> </head> <body> <canv
基于JS实现带动画效果的流程进度条

当在使用流程的时候,比如有一个审核流程,有三个阶段:开始,审核中,审核成功.当在不同的阶段,做相应的进度显示,当显示时,是以动画的形式显示的.话不多说,我们开始打造吧. 首先,我考虑的是使用canvas来打造这个控件,于是我现在demo.html里新建了一个canvas用来显示测试用,并且先预计了几个属性值,在做的过程中增增改改,最终属性如下: <canvas id="myCanvas" width="800" height="100" s
JS实现进度条顺滑版详细方案

进度条不顺滑相信大多前端同学都自己写过音频.视频播放器,实现并不复杂.最近在小程序里,做了一个类似微博刷视频的需求.其中有一部分功能需要实现自定义进度条,在做完第一版之后发现进度条不顺滑,而后想查查网上看有没有什么好的方案,但最终没找到合适的.于是想看看微信小程序里的"微博"进度条如何,结果也是很生硬的动画,下面放了一个GIF,大家也可以自己搜索微信小程序的微博,找个视频看看效果. 常规方案最终决定还是优化一下这个问题,先来捋一捋我们现有常规方案. 监听TimeUpdate事件获
js实现进度条的方法

本文实例讲述了js实现进度条的方法.分享给大家供大家参考.具体实现方法如下: 1.setTimeout和clearTimeout <html> <head> <title>进度条</title> <style type="text/css"> .container{ width:450px; border:1px solid #6C9C2C; height:25px; } #bar{ background:#95CA0D; f
js 蒙版进度条（结合图片）

复制代码代码如下: /******************** ** js 蒙版进度条(图片) ** dingzh@jstrd.com ** 2009-12-03 *********************/ //禁止网页后退 window.history.forward(1); document.attachEvent("onkeydown",docKeyDown); function docKeyDown() { //屏蔽退格删除键 if (window.event.keyCod
JS实现进度条动态加载特效

本文实例为大家分享了JS实现进度条动态加载的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>进度条</title> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"
Vue中使用js制作进度条式数据对比动画

本文实例为大家分享了Vue中使用js制作进度条式数据对比动画的具体代码,供大家参考,具体内容如下实现的效果:(初始化以及浏览器resize的时候两侧的条形为向两侧递增的动画,其中两端的数字也是递增的动画) HTML部分: <div class="no-ivatargo-chart-b"> <div class="investment-ability"> <div class="title">
vue柱状进度条图像的完美实现方案

前言本文是对bar进度条实现的2种方案进行分享,第一种是很简单,纯css的实现,第二种是echart的实现. css的实现 css实现很简单.代码如下: <template> <div class="haoroomflex"> <div v-for="(item,index) in barData" :key="index" class="onebar"> <div class=&q
基于 D3.js 绘制动态进度条的实例详解

D3 是什么 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的.如果你不知道什么是 JavaScript ,请先学习一下 JavaScript,推荐阮一峰老师的教程. JavaScript 文件的后缀名通常为 .js,故 D3 也常使用 D3.js 称呼.D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度.由于
js实现带进度条提示的多视频上传功能

本文实例为大家分享了js带进度条上传多视频的具体代码,供大家参考,具体内容如下效果: 引用: <link rel="stylesheet" href="bootstrap.css" rel="external nofollow" > <script src="jquery.fileupload.js"></script> <script src="http://malsup
js实现简单进度条效果

本文实例为大家分享了js实现简单进度条的具体代码,供大家参考,具体内容如下实现进度条需要三个部分: 1.外部的大容器 2.在增长的进度条 3.显示进度条可视化的百分数运用js控制进度条的width便可实现; 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>
js实现滑动进度条效果

本文实例为大家分享了js实现滑动进度条效果的具体代码,供大家参考,具体内容如下进度条: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js滑动进度条效果</title> <style> *{margin:0;padding:0;user-select:none;} .progress-bar{position:relativ

JS实现进度条顺滑版详细方案

进度条不顺滑

常规方案

相关推荐

随机推荐