用RxJS寫一個數字跳動的效果

Miracle 發布于2019-08-22 13:59 / 1206人閱讀

摘要：有的時候我們想實現一個數字從逐漸遞增到的跳動效果，如果用的話就可以輕松實現。廢話不多說直接上源碼開始數字結束數字持續時間跳動幾次回調用保證數字最終會變為

有的時候我們想實現一個數字從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寫一個單例字節跳動用的哪家云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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