Counter Animation 計數動畫蒐集

在碰類似 dashboard 的介面,你一定很常看到各種有點假假的數字動畫,但真的要用到的時候發現我以前根本沒用過類似的套件XD所以就找了幾個套件,我認為看起來還不差的。

可能有些是 survey 到 angular 的版本,主要是因為我剛好在用 angular 啦...

Angular Counter
http://indrimuska.github.io/angular-counter/
設定比較多元,需要搭配 jquery easing




Angular Count to
http://sparkalow.github.io/angular-count-to/
用起來比較直覺,但是設定比較沒有上面的多元。基礎快速。




jquery.animateNumber
http://aishek.github.io/jquery-animateNumber/
如果你不寫 angular 的話也可以試試看 jquery 的這個 anumateNumber.




odometer
http://github.hubspot.com/odometer/docs/welcome/
https://github.com/HubSpot/odometer
效果還蠻有趣的一套。



jQuery Knob
http://anthonyterrien.com/knob/
https://github.com/aterrien/jQuery-Knob
在圓餅圖上的,不過我沒用過,只是剛好看到,覺得挺有趣的。



CountUp.js
https://github.com/inorganik/CountUp.js
License: MIT
從 Demo 頁上面看起來設定蠻多,還有動畫效果可以調。
看起來是有支援 angular directive. 也支援 wordpress (真多元).



大概就這些,其實我也沒有看遍所有的 google search result (沒有這麼閒 XD)
只是剛好把喵到喜歡的,紀錄一下。如果有其他不錯的 plugin,歡迎留言推薦,感謝!

留言

這個網誌中的熱門文章

[Android] 筆記 手機上測試自己的 APP

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

[Android 筆記] 設定 ImageView 的圖檔來源