vue:实现丝滑上传进度条

一、效果展示

缓若江海凝清光

.

二、代码

TypeScript 复制代码
const uploadProgress = ref(); //上传进度

//进度丝滑更新
//进度,时常
const ProgressChange = (targetPercent: number, duration: number) => {
  //performance.now() 是浏览器提供的一个高性能时间 API,它返回一个 DOMHighResTimeStamp,
  //这个时间戳提供了当前页面从加载到现在所经过的毫秒数,具有很高的精度,适合用来测量脚本执行时间、动画帧间隔等
  const startTime = performance.now();
  //获取当前进度
  const startPercent = uploadProgress.value;

  const step = (currentTime: number) => {
    // 计算当前进度
    const elapsedTime = currentTime - startTime;
    // 修改进度条的百分比实现动画效果
    let currentPercent = easeInOut(
      elapsedTime,
      startPercent,
      targetPercent - startPercent,
      duration
    );

    // 确保百分比不超过100且不小于0
    currentPercent = Math.min(Math.max(currentPercent, 0), 100);

    // 更新进度条
    uploadProgress.value = Math.round(currentPercent);

    // 如果动画未结束,继续执行动画
    if (currentPercent < 100 && elapsedTime < duration) {
      requestAnimationFrame(step);
    } else {
      uploadProgress.value = Math.round(targetPercent); // 确保最终值准确无误
    }
  };

  // 使用函数使动画更加平滑
  const easeInOut = (t: number, b: number, c: number, d: number) => {
    t /= d / 2;
    if (t < 1) return (c / 2) * t * t * t + b;
    t -= 2;
    return (c / 2) * (t * t * t + 2) + b;
  };
  requestAnimationFrame(step);
};

//选择文件
const handleFileChange = async (event: any) => {
  uploadProgress.value = 0;
  const file = event.target.files[0];
  fileNmae.value = file.name;
  if (file) {
    const reader = new FileReader();
    const updateProgress = (event: ProgressEvent) => {
      if (event.lengthComputable) {
        const totalDuration = 1000; // 1秒,单位为毫秒
        const percentComplete = (event.loaded / event.total) * 100;
        ProgressChange(percentComplete, totalDuration);
      }
    };
    reader.readAsDataURL(file);
    reader.onprogress = updateProgress;
    reader.onload = (e) => {
      if (typeof e.target?.result == "string") {
        imageUrl.value = e.target.result;
      }
      reader.onprogress = null;
      fileInfo.size = Number((file.size / 1024).toFixed(2));
    };
  }

三、实现原理

1.通过performance.now()获取动画的时间戳,用于创建流畅的动画。

2.通过一个缓动函数来实现动画的过渡效果。

3.通过requestAnimationFrame这个API来更新动画帧,优化显示效果。

相关推荐
疯狂的沙粒17 分钟前
在uni-app中如何从Options API迁移到Composition API?
javascript·vue.js·uni-app
siwangqishiq221 分钟前
Vulkan Tutorial 教程翻译(四) 绘制三角形 2.2 呈现
前端
李三岁_foucsli22 分钟前
js中消息队列和事件循环到底是怎么个事,宏任务和微任务还存在吗?
前端·chrome
尽欢i23 分钟前
HTML5 拖放 API
前端·html
xiaominlaopodaren37 分钟前
Three.js 光影魔法:如何单独点亮你的3D模型
javascript
PasserbyX38 分钟前
一句话解释JS链式调用
前端·javascript
1024小神40 分钟前
tauri项目,如何在rust端读取电脑环境变量
前端·javascript
Nano44 分钟前
前端适配方案深度解析:从响应式到自适应设计
前端
古夕1 小时前
如何将异步操作封装为Promise
前端·javascript
小小小小宇1 小时前
前端定高和不定高虚拟列表
前端