摘要:有的时候我们想实现一个数字从逐渐递增到的跳动效果,如果用的话就可以轻松实现。废话不多说直接上源码开始数字结束数字持续时间跳动几次回调用保证数字最终会变为
有的时候我们想实现一个数字从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); }, }); }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/92733.html
摘要:整个数据流序列 Rxjs入门实践-各种排序算法排序过程的可视化展示 这几天学习下《算法》的排序章节,具体见对排序的总结,想着做点东西,能将各种排序算法的排序过程使用Rxjs通过可视化的方式展示出来,正好练系一下Rxjs的使用本文不会太多介绍Rxjs的基本概念,重点介绍如何用响应式编程的思想来实现功能 在线演示地址 源码 效果图 showImg(https://segmentfault...
摘要:整个数据流序列 Rxjs入门实践-各种排序算法排序过程的可视化展示 这几天学习下《算法》的排序章节,具体见对排序的总结,想着做点东西,能将各种排序算法的排序过程使用Rxjs通过可视化的方式展示出来,正好练系一下Rxjs的使用本文不会太多介绍Rxjs的基本概念,重点介绍如何用响应式编程的思想来实现功能 在线演示地址 源码 效果图 showImg(https://segmentfault...
摘要:技术积累经过社区的努力学习资料还是很多的,官方中文文档就已经很不错,不过我们先从天精通初步感受一下然后配合一些中文文档来补充知识点,最后再根据官方文档来校验整个知识体系。资料学习操作符的时候可以对照弹珠图的交互弹珠图的中文版中文文档 前言 最近准备毕设,技术选型的时候因为功能的一些需求准备将RxJs融入到项目中,考虑RxJs的时候因为之前的技术栈还犹豫了一下,查了一些资料以及粗略浏览了...
阅读 2865·2021-11-24 09:39
阅读 3478·2021-11-22 13:54
阅读 3365·2021-11-16 11:45
阅读 2375·2021-09-09 09:33
阅读 3129·2019-08-30 15:55
阅读 1229·2019-08-29 15:40
阅读 884·2019-08-29 15:19
阅读 3335·2019-08-29 15:14