#如圖所示的信用積分100是透過Angular.js進(jìn)行資料綁定的,現(xiàn)在我需要在信用積分頁面用jQuery或Canvas做一個特效,使用者的起始信用是100,白色的小圓圈在最右邊,隨後用戶的信用分會在100分以上做增減,大於100分的時候,圖片沒有變化,當(dāng)小於100分的時候,白色小圓圈就會逆時針移動
#舉例,當(dāng)使用者信用分為50的時候,白色的小圓圈在半圓的正中間,左邊1/2圈仍舊為白色,右邊1/2顯示其他顏色效果；
當(dāng)使用者信用分為75的時候,白色的小圓圈在半圓右邊3/4圈位置處,左邊3/4圈仍舊為白色,右邊1/4顯示其他顏色效果；
也就是說圓圈顏色的變化是會隨著我綁定的信用積分的變化而改變。
請問下,如果我想做出這種特效,改用jQuer還是Canvas動畫來實現(xiàn),沒有思路,能否給出些思路應(yīng)該如何來實現(xiàn)以上特效.(有其他技術(shù)的實現(xiàn)方式也可以,或是有類似的插件更好,在苦逼的被催著趕項目,deadline很緊，交互這塊真的沒精力多管,一個人負(fù)責(zé)一款app的前端，忙著和後臺接口)
4
0
0
走同樣的路，發(fā)現(xiàn)不同的人生
把高中數(shù)學(xué)書拿出來，把sin cos 這些內(nèi)容重新?lián)炱饋恚偌由舷嚓P(guān)函數(shù)，應(yīng)該就可以解決了，嘿嘿
deadline很緊的話，上現(xiàn)成的圖表庫嘛?；蛘吣阏艺矣袥]有可以輕鬆做視覺化資料的SVG動畫庫，應(yīng)該也能達(dá)到類似的效果。
用canvas來寫吧 透過監(jiān)控信用分?jǐn)?shù)與100的比例，然後已比例來算出目前應(yīng)該在的位置的圓弧長度。再根據(jù)圓弧長度可以求出圓心角了。然後你也可以透過requestanimationframe 可以初始狀態(tài)設(shè)為資料設(shè)為0，然後透過每次render去均勻修改值，達(dá)到進(jìn)頁面的時候圓圈動態(tài)變化位置的效果。
