灏天阁

永远加载不满的进度条

· Yin灏

前言

各位开发大佬,平时肯定见到过这种进度条吧,一直在加载,但等了好久都是在 99%

如下所示:

动画22222.gif

有没有好奇这个玩意儿咋做的呢?

细听分说(需要看使用:直接看实践即可)

fake-progress

如果需要实现上面的这个需求,其实会涉及到 fake-progress 这个库,具体是干嘛的呢?
这个库会提供一个构造函数,创建一个实例对象后,里面的属性会给我们进度条需要的数据等信息。
如图所示:

动画22222.gif fake-progress 库的源码如下:

/**
 * Represents a fakeProgress
 * @constructor
 * @param {object} options - options of the contructor
 * @param {object} [options.timeConstant=1000] - the timeConstant in milliseconds (see https://en.wikipedia.org/wiki/Time_constant)
 * @param {object} [options.autoStart=false] - if true then the progress auto start
 */

const FakeProgress = function (opts) {
  if (!opts) {
    opts = {};
  }
  // 时间快慢
  this.timeConstant = opts.timeConstant || 1000;
  // 自动开始
  this.autoStart = opts.autoStart || false;
  this.parent = opts.parent;
  this.parentStart = opts.parentStart;
  this.parentEnd = opts.parentEnd;
  this.progress = 0;
  this._intervalFrequency = 100;
  this._running = false;
  if (this.autoStart) {
    this.start();
  }
};

/**
 * Start fakeProgress instance
 * @method
 */

FakeProgress.prototype.start = function () {
  this._time = 0;
  this._intervalId = setInterval(
    this._onInterval.bind(this),
    this._intervalFrequency
  );
};

FakeProgress.prototype._onInterval = function () {
  this._time += this._intervalFrequency;
  this.setProgress(1 - Math.exp((-1 * this._time) / this.timeConstant));
};

/**
 * Stop fakeProgress instance and set progress to 1
 * @method
 */

FakeProgress.prototype.end = function () {
  this.stop();
  this.setProgress(1);
};

/**
 * Stop fakeProgress instance
 * @method
 */

FakeProgress.prototype.stop = function () {
  clearInterval(this._intervalId);
  this._intervalId = null;
};

/**
 * Create a sub progress bar under the first progres
 * @method
 * @param {object} options - options of the FakeProgress contructor
 * @param {object} [options.end=1] - the progress in the parent that correspond of 100% of the child
 * @param {object} [options.start=fakeprogress.progress] - the progress in the parent that correspond of 0% of the child
 */

FakeProgress.prototype.createSubProgress = function (opts) {
  const parentStart = opts.start || this.progress;
  const parentEnd = opts.end || 1;
  const options = Object.assign({}, opts, {
    parent: this,
    parentStart: parentStart,
    parentEnd: parentEnd,
    start: null,
    end: null,
  });

  const subProgress = new FakeProgress(options);
  return subProgress;
};

/**
 * SetProgress of the fakeProgress instance and updtae the parent
 * @method
 * @param {number} progress - the progress
 */

FakeProgress.prototype.setProgress = function (progress) {
  this.progress = progress;
  if (this.parent) {
    this.parent.setProgress(
      (this.parentEnd - this.parentStart) * this.progress + this.parentStart
    );
  }
};

我们需要核心关注的参数只有 timeConstant,autoStart 这两个参数,通过阅读源码可以知道 timeConstant 相当于分母,分母越大则加的越少,而 autoStart 则是一个开关,如果开启了直接执行 start 方法,开启累计的定时器。 通过这个库,我们实现一个虚拟的进度条,永远到达不了 100%的进度条。
但是如果这时候像接口数据或其他什么资源加载完了,要到 100%了怎么办呢?可以看到代码中有 end()方法,因此显示的调用下实例的 end()方法即可。

实践

上面讲了这么多下面结合圆形进度条(后面再出个手写圆形进度条)来实操一下,效果如下: 动画22222.gif 代码如下所示:

<template>
  <div ref="main" class="home">
    </br>
    <div>{{ fake.progress }}</div>
    </br>
    <Progress type="circle" :percentage="parseInt(fake.progress*100)"/>
    </br></br>
    <el-button @click="stop">停止</el-button>
    </br></br>
    <el-button @click="close">关闭</el-button>
  </div>
</template>

<script>
import FakeProgress from "fake-progress";

export default {
  data() {
    return {
      fake: new FakeProgress({
        timeConstant : 6000,
        autoStart : true
      })
    };
  },
  methods:{
    close() {
      this.fake.end()
    },
    stop() {
      this.fake.stop()
    }
  },
};
</script>

总结

如果需要实现一个永远不满的进度条,那么你可以借助 fake-progress 核心是 1 - Math.exp((-1 * this._time) / this.timeConstant) 这个公式
涉及到一个数据公式: e 的负无穷次方趋近于 0。所以 1-e^-x 永远到不了 1,但趋近于 1

核心原理就是:用时间做分子,传入的 timeConstant 做分母,通过 Math.exp((-1 * this._time) / this.timeConstant) 可知,如果时间不断累积且为负值,那么 Math.exp((-1 * this._time) / this.timeConstant) 就无限趋近于 0。所以 1 - Math.exp((-1 * this._time) / this.timeConstant) 就可以得到无限趋近于 1 的值

总结,如果需要使用的话,在使用的地方创建一个实例即可(配置 autoStart 之后就会自动累加):

new FakeProgress({
  timeConstant: 6000,
  autoStart: true,
});

如果需要操作停止或介绍使用其实例下的对应方法即可

this.fake.end();
this.fake.stop();

- Book Lists -