Swift實現UILabel中數字動畫效果

昨天入坑了「邏輯思維」團隊的「得到App」,存了錢進去以後發現在「帳戶餘額」介面上的「餘額」有動畫效果,
而之前在「餘額寶」的App中也有看到類似的動畫效果,給App增加了不少樂趣,感覺就像玩遊戲,錢一直在漲的感覺 (=^W^=)


會跳動的數字

上面這張GIF就是實作後的動畫效果,如果我的帳號這樣輕鬆地增加餘額就好了(=^O^=)

往下看之前,也可以先思考看看,如果今天遇到這樣的需求,會如何去實現這樣的效果。

數字變化的過程

如果今天PM告訴我們需要一個「從0過渡到1024的動畫效果」,我想有些人會覺得很簡單,直接做一個循環,在畫面上顯示1、2、3、4…1024。
但其實這種動畫通常不會顯示很久,測試下來感覺2秒就開始考驗耐性了。

所以其實應該是需要寫成像「進度條」那樣,根據當前進度跳躍式的重新渲染畫面(如0、124、258…1024),這樣一定比1、2、3、4…1024每一個數字都要進行一次渲染來得有效率。
畢竟應該沒有PM會說,「我們希望用戶可以在1秒內看到每一個數字」…

兩個對外的動畫方法

定義「初始數字」、「最終數字」、「動畫時間」、啟動「Timer」。

用CADisplayLink代替Timer

Timer所在的runloop中因為需要處理很多事物,所以它最小週期大約在50~100ms之間(官方描述),也就是1秒內大約能處理20次,這樣不容易達到60FPS的順暢感,

timer會呼叫「updateValue」方法,來更新當前數字的「進度」,並且通過settextValue()來改變UILabel中的text。

當前餘額變化進度的計算方式

以時間為單位,如果progress已經達到/超過動畫時間,就直接顯示最終的數字。


參考和推薦


分享文章:「Swift實現UILabel中數字動畫效果」 – https://ios.devdon.com/archives/507

2 thoughts on “Swift實現UILabel中數字動畫效果

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *