資訊專欄INFORMATION COLUMN
摘要：有的時候我們想實現(xiàn)一個數(shù)字從逐漸遞增到的跳動效果，如果用的話就可以輕松實現(xiàn)。廢話不多說直接上源碼開始數(shù)字結(jié)束數(shù)字持續(xù)時間跳動幾次回調(diào)用保證數(shù)字最終會變?yōu)?/p>
有的時候我們想實現(xiàn)一個數(shù)字從a逐漸遞增到b的跳動效果，如果用rxjs的話就可以輕松實現(xiàn)。廢話不多說直接上源碼：
import { Observable } from "rxjs/Observable";
import "rxjs/add/observable/interval";
import "rxjs/add/operator/take";
import "rxjs/add/operator/scan";
// start: 開始數(shù)字 end: 結(jié)束數(shù)字 duration: 持續(xù)時間 interval: 跳動幾次 cb: 回調(diào)
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保證數(shù)字最終會變?yōu)閑nd
complete: () => {
cb(end);
},
});
}
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/92733.html
摘要：整個數(shù)據(jù)流序列 Rxjs入門實踐-各種排序算法排序過程的可視化展示 這幾天學習下《算法》的排序章節(jié)，具體見對排序的總結(jié),想著做點東西，能將各種排序算法的排序過程使用Rxjs通過可視化的方式展示出來，正好練系一下Rxjs的使用本文不會太多介紹Rxjs的基本概念，重點介紹如何用響應式編程的思想來實現(xiàn)功能 在線演示地址 源碼 效果圖 showImg(https://segmentfault...
摘要：整個數(shù)據(jù)流序列 Rxjs入門實踐-各種排序算法排序過程的可視化展示 這幾天學習下《算法》的排序章節(jié)，具體見對排序的總結(jié),想著做點東西，能將各種排序算法的排序過程使用Rxjs通過可視化的方式展示出來，正好練系一下Rxjs的使用本文不會太多介紹Rxjs的基本概念，重點介紹如何用響應式編程的思想來實現(xiàn)功能 在線演示地址 源碼 效果圖 showImg(https://segmentfault...
摘要：技術積累經(jīng)過社區(qū)的努力學習資料還是很多的，官方中文文檔就已經(jīng)很不錯，不過我們先從天精通初步感受一下然后配合一些中文文檔來補充知識點，最后再根據(jù)官方文檔來校驗整個知識體系。資料學習操作符的時候可以對照彈珠圖的交互彈珠圖的中文版中文文檔 前言 最近準備畢設，技術選型的時候因為功能的一些需求準備將RxJs融入到項目中，考慮RxJs的時候因為之前的技術棧還猶豫了一下，查了一些資料以及粗略瀏覽了...
閱讀 3052·2021-11-24 09:39
閱讀 3692·2021-11-22 13:54
閱讀 3475·2021-11-16 11:45
閱讀 2549·2021-09-09 09:33
閱讀 3273·2019-08-30 15:55
閱讀 1354·2019-08-29 15:40
閱讀 991·2019-08-29 15:19
閱讀 3483·2019-08-29 15:14
