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

Miracle 发布于2019-08-22 13:59 / 1134人阅读

摘要：有的时候我们想实现一个数字从逐渐递增到的跳动效果，如果用的话就可以轻松实现。废话不多说直接上源码开始数字结束数字持续时间跳动几次回调用保证数字最终会变为

有的时候我们想实现一个数字从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);
      },
    });
}

GPU云服务器云服务器用html写一个秒表用php写一个日志用java写一个单例字节跳动用的哪家云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92733.html

RxJS基础教程

摘要：是一个基于可观测数据流在异步编程应用中的库。正如官网所说，是基于观察者模式，迭代器模式和函数式编程。它具有时间与事件响应的概念。通知不再发送任何值。和通知可能只会在执行期间发生一次，并且只会执行其中的一个。 RxJS是一个基于可观测数据流在异步编程应用中的库。 ReactiveX is a combination of the best ideas fromthe Observer p...

defcon 2019-08-22 15:32 评论0 收藏0
Rxjs入门实践-各种排序算法排序过程的可视化展示

摘要：整个数据流序列 Rxjs入门实践-各种排序算法排序过程的可视化展示这几天学习下《算法》的排序章节，具体见对排序的总结,想着做点东西，能将各种排序算法的排序过程使用Rxjs通过可视化的方式展示出来，正好练系一下Rxjs的使用本文不会太多介绍Rxjs的基本概念，重点介绍如何用响应式编程的思想来实现功能在线演示地址源码效果图 showImg(https://segmentfault...

piglei 2019-08-21 17:11 评论0 收藏0
Rxjs入门实践-各种排序算法排序过程的可视化展示

摘要：整个数据流序列 Rxjs入门实践-各种排序算法排序过程的可视化展示这几天学习下《算法》的排序章节，具体见对排序的总结,想着做点东西，能将各种排序算法的排序过程使用Rxjs通过可视化的方式展示出来，正好练系一下Rxjs的使用本文不会太多介绍Rxjs的基本概念，重点介绍如何用响应式编程的思想来实现功能在线演示地址源码效果图 showImg(https://segmentfault...

荆兆峰 2019-08-01 17:49 评论0 收藏0
将RxJS融入React项目

摘要：技术积累经过社区的努力学习资料还是很多的，官方中文文档就已经很不错，不过我们先从天精通初步感受一下然后配合一些中文文档来补充知识点，最后再根据官方文档来校验整个知识体系。资料学习操作符的时候可以对照弹珠图的交互弹珠图的中文版中文文档前言最近准备毕设，技术选型的时候因为功能的一些需求准备将RxJs融入到项目中，考虑RxJs的时候因为之前的技术栈还犹豫了一下，查了一些资料以及粗略浏览了...

frontoldman 2019-08-26 11:37 评论0 收藏0