效果預覽數組
▌滾動數字的效果預覽，位數設置：10，初始值：0，測試時，把顯示數字手動修改成 1234567890 的效果，#免費提供代碼#，具體獲取方法，參考文章結尾部分。微信
使用說明測試
▌建立一個空節點，給空節點添加本實例中的腳本 RollNumber 組件，還須要額外添加兩個組件 Mask 組件和 Layout 組件，添加完效果，大體以下圖所示，文字居中顯示，節點當作正常節點進行使用便可。字體
▌Mask 組件主要用來控制數字的顯示，Layout 用來控制多位數字的顯示，Layout 須要設置成水平方向，Mode 須要設置成 Container 方式，設置以下圖。flex
▌RollNumber 組件支持顯示位數、運動速率的設置，使用時，須要設置每一位數字的顯示寬度 width（注意不是全部位數的寬度），還須要設置 0-9 每一個數字的紋理圖片，並對應上數組下標，以下圖所示。
url
實現原理spa
▌具體的原理是，每一位一開始把 0-9-0 數字豎直方向拼接，都置於 Layout 組件內，從上到下排列，須要顯示的區域經過遮罩顯示，其餘不須要顯示部位就不會顯示出來，當須要顯示指定數字時，改變父節點的縱軸座標實現須要的數字顯示。
.net
▌上圖就是去掉遮罩組件的顯示效果，這樣看更方便理解，其中綠色區域是顯示區域，遮罩打開之後，玩家只會看到綠色區域範圍。3d
▌運動分爲兩種：一種是數字從小到大，另一種是從大到小。
orm
▌數字從小到大，只須要獲取到要運動到的位置，直接節點作 MoveTo 動做，讓節點運動到指定數字便可。
▌數字從大到小，由於運動方向只有往上的，須要分三步：
1. 運動到最低端的 0 位置；
2. 總體下移，顯示 0 ，這也是方便過渡，肉眼看不出變化效果；
3. 再 MoveTo 到指定的數字位置。
▌考慮到數字的長度可能會發生變化，使用節點池能夠提高效率，須要的時候，從節點池獲取，若是節點池是空的，從新生成。
▌數字運動的距離有長有短，計算運動時間時，須要根據偏移量計算運動時間，以達到每一位在相同時間內完成數字的變化。
獲取代碼
▌關注公衆號，發送【滾動數字】獲取代碼，能夠微信掃描下面二維碼，關注本公衆號，也能夠點擊開頭處的藍色字體進行關注。
往期精選
掃描二維碼
獲取更多精彩
一枚小工
讓我知道你在看
本文分享自微信公衆號 - 一枚小工（caizj_cn）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。