前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~X2h28資訊網——每日最新資訊28at.com

背景

平時瀏覽一些跟數字有關的網頁的時候，可能你會發現數字并不是直接從 0 變成 99999 的，這樣會很生硬，而是會有一個從 0 增長到 99999 的動畫效果，如下圖X2h28資訊網——每日最新資訊28at.com

圖片X2h28資訊網——每日最新資訊28at.com

那這個效果要怎么實現呢？其實挺簡單的，也挺有趣的，繼續往下看吧~X2h28資訊網——每日最新資訊28at.com

useNumberAnimation

我們創建一個文件 use-number-animation.ts 來寫這個 hooksX2h28資訊網——每日最新資訊28at.com

確定參數

首先來確定這個函數需要接受什么參數：X2h28資訊網——每日最新資訊28at.com

• from：起始數字
• to：最終數字
• duration：動畫延遲間隔
• onProgress：增長回調函數

圖片X2h28資訊網——每日最新資訊28at.com

requestAnimationFrame

圖片X2h28資訊網——每日最新資訊28at.com

可以看到數字是在不停變化的，所以我們需要有一個定時任務去讓這個數字一直變化才行，那么用 setInterval 嗎？不是的，顯然用 requestAnimationFrame 性能會更佳，它會在瀏覽器下一幀重繪之前執行~X2h28資訊網——每日最新資訊28at.com

圖片X2h28資訊網——每日最新資訊28at.com

增長速度

圖片X2h28資訊網——每日最新資訊28at.com

可以看到數字在不斷增長，那么既然是增長，就需要計算增長速度，增長速度要怎么算呢？X2h28資訊網——每日最新資訊28at.com

假設我要用3000ms的時間去從0增長到378291.668，那增長速度是不是 (378291.668 - 0) / 3000呢？X2h28資訊網——每日最新資訊28at.com

圖片X2h28資訊網——每日最新資訊28at.com

由此我們可以知道增長速度 speed = (to - from) / duration;X2h28資訊網——每日最新資訊28at.com

X2h28資訊網——每日最新資訊28at.com

啥時候終止增長？

啥時候終止增長呢？其實很簡單，那就是從開始增長開始，經過的時間大于 duration 時，就終止，這個時候說明動畫必須要結束的~X2h28資訊網——每日最新資訊28at.com

最終代碼

可以得出最終的代碼為X2h28資訊網——每日最新資訊28at.com

圖片X2h28資訊網——每日最新資訊28at.com

使用方式如下X2h28資訊網——每日最新資訊28at.com

X2h28資訊網——每日最新資訊28at.com

最終達到數字增長的動畫效果~X2h28資訊網——每日最新資訊28at.com

圖片 X2h28資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-84002-0.htmlVue3 實現超級有趣的功能：數字增長動畫！！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： Git Worktree 讓你再也無需切換分支！

下一篇： WPF魔法：輕松實現依賴注入與控制反轉提升代碼優雅性與可維護性