聊聊數字切換庫Tumbling的開發心路歷程

先安利一波，Tumbling demo show
說到數字切換，你們應該比較熟悉，先來一張gif

初看還能夠，細看會發現有兩個問題

• 數字滾動的方向不一致，有的從上往下，有的從下往上
• 有的數字根本沒有滾動

這種場景的實現大體以下

<ul>
  <li>9</li>
  <li>8</li>
  <li>7</li>
  <li>6</li>
  <li>5</li>
  <li>4</li>
  <li>3</li>
  <li>2</li>
  <li>1</li>
  <li>0</li>
</ul>複製代碼

經過改變ul的translateY或者top來實現數字上下滾動，假設當前值是1，而後變成9，ul是向下滾，但是當數字變成3的時候，ul就得向上滾才行，怎麼解決呢，因而就有了另一種寫法

<ul>
  <li>9</li>
  <li>8</li>
  <li>7</li>
  <li>6</li>
  <li>5</li>
  <li>4</li>
  <li>3</li>
  <li>2</li>
  <li>1</li>
  <li>0</li>
  <li>9</li>
  <li>8</li>
  <li>7</li>
  <li>6</li>
  <li>5</li>
  <li>4</li>
  <li>3</li>
  <li>2</li>
  <li>1</li>
  <li>0</li>
</ul>複製代碼

作過輪播圖的同窗確定知道，咱們須要在最後一張圖的後面還要添加第一張圖，來實現循環輪播，這個原理跟輪播圖是同樣，仍是假設當前值是最下面的1，而後變成9，ul是向下滾，而後當數字變成3的時候,繼續向下滾，滾動到上面的那個3，當滾動結束的時候再移到最下面的3(這個過程沒有動畫，用戶無感知)，問題是解決了，可是你會發現用的DOM實在是有點多，比較耗性能，固然也有能解決的辦法，就是滾動結束後讓ul的display等於none

第一個問題有了還不錯的方案，第二個問題就相對複雜了，數字不動，是由於對應這個位置的數字沒有發生變化，可是咱們想象實際場景，111變成211，難道最右邊的11不須要滾動麼，確定是要動，要否則怎麼能有111，112，113 ... 209 210 111這樣的真實動畫效果呢，如何解決呢？

咱們首先須要算出先後的差值，而後分別計算各個位置的數字應該滾動的距離，而後繪製動畫，那前面舉個例子，111 -> 211, 差值是 100，個位須要移動 100個單位，十位須要移動 10個單位，百分須要移動1個單位
問題來了個位須要轉100個單位，依照前面的思路根本實現不了，你不可能真的放100個li在裏面，若是變成1千，1萬個呢，這其實引起了一個若是實現無線滾動的一個場景
細細分析，你會發現任什麼時候候，這個數字滾動效果在同一時間用戶最多能看到兩個數字，若是你理解了這一點，咱們就能夠用兩個li去完成整個無線滾動的場景，兩個li按照必定的規律來切換對應的值具體實現能夠去看Tumbling的源碼

若是你看到了這裏，說明你對這個頗有興趣，那麼我接下來分享的應該是會讓你更加有興趣的
搞定了上面兩個問題，我又開始思考另外的問題

• 若是我還想實現別的效果呢，不是這種上下滾動，而是左右翻轉或者上下翻轉，或者別的呢
• 若是我想把裏面的數字換成字符、或者別的圖片呢

當想到這個問題的時候，就是須要開始思考如何去抽象了，細細概括，上面兩個問題，一個是動畫擴展的能力，一個是內容渲染擴展的能力，帶着這兩個問題，我編寫了Tumbling，核心的思想也是用來解決上面的兩個問題，Tumbling核心是實現了計算、各動畫指標的量化輸出，簡單理解就是生產數據，至於怎麼使用數據，Tumbling提供了默認的處理方式(動畫效果，內容渲染)，然而使用者是能夠本身決定如何用數據來作動畫，來作渲染內容，MODEL =》 VIEW，你get到了個人點了麼？歡迎翻看Tumbling文檔

另外補充下，Tumbling實現了es:next規範，支持tree-shaking，雖然它自己也很小~~
目前只開放了DOM的版本，後續還會補上canvas，爲何要有canvas呢，由於能夠製做出很是絢爛的效果

github地址sheweichun.github.io/tumbling/bu…,歡迎查閱

有點晚了，明天還要奮戰雙十一，洗洗睡了，後面由空再繼續補充啦!!