用RxJS写一个数字跳动的效果

有的时候我们想实现一个数字从a逐渐递增到b的跳动效果,如果用rxjs的话就可以轻松实现。废话不多说直接上源码:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/take';
import 'rxjs/add/operator/scan';

// start: 开始数字 end: 结束数字 duration: 持续时间 interval: 跳动几次 cb: 回调
export function jump({ start, end, duration = 300, interval = 10, cb }) {
  const delta = Math.abs(end - start);
  const sign = Math.sign(end - start);
  const numberIncrease = Math.floor(delta / interval);
  const timeIncrease = duration / interval;
  Observable
    .interval(timeIncrease)
    .take(interval)
    .scan((acc) => acc + (numberIncrease * sign), start)
    .subscribe({
      next: (n) => {
        cb(n);
      },
      // 用complete保证数字最终会变为end
      complete: () => {
        cb(end);
      },
    });
}

你可能感兴趣的:(javascript,rxjs)