国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

用RxJS寫一個(gè)數(shù)字跳動(dòng)的效果

Miracle / 1197人閱讀

摘要：有的時(shí)候我們想實(shí)現(xiàn)一個(gè)數(shù)字從逐漸遞增到的跳動(dòng)效果，如果用的話就可以輕松實(shí)現(xiàn)。廢話不多說直接上源碼開始數(shù)字結(jié)束數(shù)字持續(xù)時(shí)間跳動(dòng)幾次回調(diào)用保證數(shù)字最終會(huì)變?yōu)?/p>

有的時(shí)候我們想實(shí)現(xiàn)一個(gè)數(shù)字從a逐漸遞增到b的跳動(dòng)效果，如果用rxjs的話就可以輕松實(shí)現(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ù)時(shí)間 interval: 跳動(dòng)幾次 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ù)字最終會(huì)變?yōu)閑nd
      complete: () => {
        cb(end);
      },
    });
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/92733.html

相關(guān)文章

  • RxJS基礎(chǔ)教程

    摘要：是一個(gè)基于可觀測(cè)數(shù)據(jù)流在異步編程應(yīng)用中的庫。正如官網(wǎng)所說，是基于觀察者模式，迭代器模式和函數(shù)式編程。它具有時(shí)間與事件響應(yīng)的概念。通知不再發(fā)送任何值。和通知可能只會(huì)在執(zhí)行期間發(fā)生一次，并且只會(huì)執(zhí)行其中的一個(gè)。 RxJS是一個(gè)基于可觀測(cè)數(shù)據(jù)流在異步編程應(yīng)用中的庫。 ReactiveX is a combination of the best ideas fromthe Observer p...

    defcon 評(píng)論0 收藏0

  • Rxjs入門實(shí)踐-各種排序算法排序過程的可視化展示

    摘要：整個(gè)數(shù)據(jù)流序列 Rxjs入門實(shí)踐-各種排序算法排序過程的可視化展示 這幾天學(xué)習(xí)下《算法》的排序章節(jié)，具體見對(duì)排序的總結(jié),想著做點(diǎn)東西，能將各種排序算法的排序過程使用Rxjs通過可視化的方式展示出來，正好練系一下Rxjs的使用本文不會(huì)太多介紹Rxjs的基本概念，重點(diǎn)介紹如何用響應(yīng)式編程的思想來實(shí)現(xiàn)功能 在線演示地址 源碼 效果圖 showImg(https://segmentfault...

    piglei 評(píng)論0 收藏0

  • Rxjs入門實(shí)踐-各種排序算法排序過程的可視化展示

    摘要：整個(gè)數(shù)據(jù)流序列 Rxjs入門實(shí)踐-各種排序算法排序過程的可視化展示 這幾天學(xué)習(xí)下《算法》的排序章節(jié)，具體見對(duì)排序的總結(jié),想著做點(diǎn)東西，能將各種排序算法的排序過程使用Rxjs通過可視化的方式展示出來，正好練系一下Rxjs的使用本文不會(huì)太多介紹Rxjs的基本概念，重點(diǎn)介紹如何用響應(yīng)式編程的思想來實(shí)現(xiàn)功能 在線演示地址 源碼 效果圖 showImg(https://segmentfault...

    荊兆峰 評(píng)論0 收藏0

  • 將RxJS融入React項(xiàng)目

    摘要：技術(shù)積累經(jīng)過社區(qū)的努力學(xué)習(xí)資料還是很多的，官方中文文檔就已經(jīng)很不錯(cuò)，不過我們先從天精通初步感受一下然后配合一些中文文檔來補(bǔ)充知識(shí)點(diǎn)，最后再根據(jù)官方文檔來校驗(yàn)整個(gè)知識(shí)體系。資料學(xué)習(xí)操作符的時(shí)候可以對(duì)照彈珠圖的交互彈珠圖的中文版中文文檔 前言 最近準(zhǔn)備畢設(shè)，技術(shù)選型的時(shí)候因?yàn)楣δ艿囊恍┬枨鬁?zhǔn)備將RxJs融入到項(xiàng)目中，考慮RxJs的時(shí)候因?yàn)橹暗募夹g(shù)棧還猶豫了一下，查了一些資料以及粗略瀏覽了...

    frontoldman 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<