前語

前段時間公司有個需求，需要實現一個數字翻滾的動畫，要求為：數字格式化為每隔3位逗號分隔，數字最后三位執行動畫，從左往右，依次翻滾，翻滾時間持續3秒鐘，類似于余額寶金額滾動的動畫，要求RN實現，效果最終實現如下：

在此記錄總結一下實現思路細節，有需要的可以參考一下。

實現思路

首先需要理一下實現要求，總的要求如下：

用ReactNative實現該動畫

數字超過三位需要格式化，少于三位不需要，正常顯示

最后三位執行動畫

最后三位從左到右，從下往上依次執行動畫，

動畫間隔時間3秒鐘

以上便是這次動畫實現的要求，接下來我們依次分解上面的要求，分別實現。

ReactNative實現

首先這是用RN實現的，這沒啥好說的。主要使用RN中提供的Animated來實現該動畫。關于Animated簡單了解一下，Animated提供了三種動畫類型。每種動畫類型都提供了特定的函數曲線，用于控制動畫值從初始值變化到最終值的變化過程：

Animated.decay()以指定的初始速度開始變化，然后變化速度越來越慢直至停下。

Animated.spring()提供了一個簡單的彈簧物理模型.

Animated.timing()使用easing 函數讓數值隨時間動起來。

在本次動畫中，我們主要使用第三種方式來實現該動畫。我們來詳細分析一下該動畫。首先它的數字是循環滾動的，即數字從0，1，2，3，4，5。。。9，0，1，2，3，4，5。。。9這種方式循環滾動的:

如何能達到這種效果呢？我們可以通過一個數組來實現，即：

// 創建"0","1","2","3","4"..."9"的數組,默認繪制數據 const resourceData = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];

使用Animated.timing來實現，這就需要我們提供一個fromValue和toValue來實現。我們可以給這個數組進行編號：

假設，我們需要將數字從3滾到7，那么根據上面的編號，我們只需要將上面的fromValue設置成-30，toValue設置成-70即可。如果需要繼續滾，將數字7滾到數字6的話，因為需要連續滾動而不能往回滾，所以需要將fromValue設置成-70，然后將toValue設置成-160，滾動到-160的時候，我們需要立即將該坐標回到起始坐標-60，這樣如果下次數字再來的話，我們直接滾動即可，這樣數組就不會越界了。這便是上面的思路。用代碼實現如下：

計算數組下標

/*** getPosition這個方法是用來計算目標數字的y軸坐標值，* 根據當前數字在數組中的下標乘以測量出的數字文本繪制高度取負值，得出坐標值。* @param {*} param0 */ const getPosition = ({ text, items, height }) => {// 獲得文本在數組的下標return parseInt(text) * height * -1; };

計算出數組下標后，我們需要設置fromValue和toValue。

計算fromValue

let nowValue = parseInt(this.props.text);let now = nowValue + 10 - this.props.rollNum;let init = getPosition({text: "" + now,items: this.props.rotateItems,height: this.props.height,});this.setState({animation: new Animated.Value(init),});

計算toValue

componentDidUpdate(prevProps) {const { height, duration, rotateItems, text } = this.props;//第一次進來，不執行動畫var endValue = getPosition({text: "" + (parseInt(this.props.text) + 10),items: rotateItems,height,});}

執行動畫

// 數字變化,用當前動畫值和變化后的動畫值進行插值,并啟動動畫Animated.timing(this.state.animation, {toValue: endValue,duration,useNativeDriver: true,}).start();

格式化數字

格式化數字很簡單，需要判斷是否存在小數點的情況：

formatNumber = numStr => {numStr += '';x = numStr.split('.');x1 = x[0];x2 = x.length > 1 ? '.' + x[1] : '';var rgx = /(\d+)(\d{3})/;while (rgx.test(x1)) {x1 = x1.replace(rgx, '$1' + ',' + '$2');}return x1 + x2;}

以上便是實現該動畫需要注意的地方，最后提供所有的代碼，有需要的可以參考一下。NumberTickerDemo

關于作者

專注于 Android 開發多年，喜歡寫 blog 記錄總結學習經驗，blog 同步更新于本人的公眾號，歡迎大家關注，一起交流學習～

總結

以上是生活随笔為你收集整理的RN实现仿余额宝余额数字翻滚动画特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。