輕量級數字動畫插件countUp.jscountUp.jsjquery.countup.js是一款輕量級jquery數字動畫插件,該數字動畫插件可以在頁面滾動時,将指定的數字從0開始計數增加動畫;該數字動畫插件可以控制動畫的延遲時間和動畫過渡時間,它依賴于Waypoints插件來監聽滾動事件大數字動畫定制easing動畫:

countUp.js是一款輕量級/無依賴的js計數器動畫特效插件,可以用來快速建立動畫,快速的通過多種方式建立計數器的動态變化效果,還可以控制計數器的暫停/恢複/重置等狀态;通過設定startVal和endVal參數,countUp可以在任何一個方向上計數;countUp相容性超強,相容所有的浏覽器;而且countUp.js既支援jq+html寫法又支援ng1和ng2寫法

target ：html元素的id,可以是input元素/svg文本元素/預先提供的元素選擇器變量

startVal ：計數器開始的數值

endVal ：計數器結束的數值

decimals ：計數器數值精度,預設值為0

duration ：計數器動畫持續時間,機關秒,預設值2

options ：一個對象,決定計數器數值的格式和動畫easing效果

Decimals/duration/options可以使用預設值

回調方法:

停止計數器動畫

恢複計數器動畫

重置計數器動畫

切換暫停/恢複計數器動畫:

更新結束值和動畫:

在頁面引入jquery,jquery.waypoints.min.js和jquery.countup.min.js檔案。

使用元素作為數字的容器。

也可以使用data-counter-time和data-counter-delay屬性來設定數字動畫的動畫時間和延遲時間

在頁面DOM元素加載完畢之後,可以通過countUp()方法來初始化數字動畫

也可以在初始化的時候傳入配置參數。

delay:每個數字動畫的延遲時間,機關毫秒;time:計數動畫總的持續時間

對于較大的數字,由于CountUp有很長的路要走幾秒鐘,動畫似乎突然停止,解決方案是從endVal中減去100,然後使用回調來調用update方法,該方法以相同的持續時間完成動畫,差異僅為100,以生成動畫:

可以選擇應用自定義easing函數,它将接收計算貝塞爾曲線所需的4個參數:

t - 目前時間,b - 開始值,c - 開始值和目标值之間的內插補點,d - 補間的總時間,可以使用任何Robert Penner的easing函數,隻需避免使用"彈性"功能,因為它們導緻雙向計數;如果不指定自定義easing函數,CountUp将使用預設的easeOutExpo

例如:

感悟：除了生活，其他不過都是調味劑