counup.js 示例地址:http://inorganik.github.io/countUp.js
countup.js下載地址:https://github.com/inorganik/countUp.js 或者 通過npm install countup.js下載包
countup.js支持所有瀏覽器。
能快速的創建各種有趣的數值動畫效果,定義動畫持續時間,設置是否啟動、停止、重置。
如何使用counup.js?
demo:
var options = {
??useEasing: true,
??useGrouping: true,
??separator: ',',
??decimal: '.',
};
var numAnim = new CountUp('myTargetElement', 0, 4036, 0, 2.5, options);
if (!numAnim.error) {
??numAnim.start();
} else {
??console.error(numAnim.error);
}
參數配置:
target = 目標元素的 ID;
startVal = 開始值;
endVal = 結束值;
decimals = 小數位數,默認值是0;
duration = 動畫延遲秒數,默認值是2;
options = 演示格式化選項對象
options配置
useEasing: true, //是否使用動畫曲線
useGrouping: true, //數字是否用separator隔開
separator: ',', //數字用逗號隔開
decimal: '.', //小數點符號
Prefix:'¥', //添加前綴
Suffix:'元' //添加后綴
其他方法:
numAnmi.start();//開啟動畫
numAnmi.pauseResume();//自動判斷當前狀態。如果當前狀態是是暫停會恢復動畫,如果當前狀態是動畫會自動暫停
numAnmi.reset() ;//當前value變成
numAnmi.update(6789);//改變endVlaue,并開啟動畫
數值大的動畫:
對于大的數字,自正數還有很長的路要走,僅僅幾秒鐘,動畫似乎突然停止。將endVal減去100,然后,使用callback來調用update這完成了方法與動畫相同,只相差100動畫
var endVal = 9645.72;
var numAnim = new CountUp("targetElem", 0, endVal - 100, duration/2);
numAnim.start(function() {
numAnim.update(endVal);
});