javascript - jQuery或Canvas積分顯示效果思路求解

Question

#如圖所示的信用積分100是透過Angular.js進行資料綁定的,現在我需要在信用積分頁面用jQuery或Canvas做一個特效,使用者的起始信用是100,白色的小圓圈在最右邊,隨後用戶的信用分會在100分以上做增減,大於100分的時候,圖片沒有變化,當小於100分的時候,白色小圓圈就會逆時針移動

#舉例,當使用者信用分為50的時候,白色的小圓圈在半圓的正中間,左邊1/2圈仍舊為白色,右邊1/2顯示其他顏色效果；
當使用者信用分為75的時候,白色的小圓圈在半圓右邊3/4圈位置處,左邊3/4圈仍舊為白色,右邊1/4顯示其他顏色效果；
也就是說圓圈顏色的變化是會隨著我綁定的信用積分的變化而改變。
請問下,如果我想做出這種特效,改用jQuer還是Canvas動畫來實現,沒有思路,能否給出些思路應該如何來實現以上特效.(有其他技術的實現方式也可以,或是有類似的插件更好,在苦逼的被催著趕項目,deadline很緊，交互這塊真的沒精力多管,一個人負責一款app的前端，忙著和後台接口)

Answer 1

把高中數學書拿出來，把sin cos 這些內容重新撿起來，再加上相關函數，應該就可以解決了，嘿嘿

Answer 2

deadline很緊的話，上現成的圖表庫嘛。或者你找找有沒有可以輕鬆做視覺化資料的SVG動畫庫，應該也能達到類似的效果。

Answer 3

看看這個：

芝麻信用

Answer 4

用canvas來寫吧 透過監控信用分數與100的比例，然後已比例來算出目前應該在的位置的圓弧長度。再根據圓弧長度可以求出圓心角了。然後你也可以透過requestanimationframe 可以初始狀態設為資料設為0，然後透過每次render去均勻修改值，達到進頁面的時候圓圈動態變化位置的效果。