javascript - jQueryまたはCanvasの統合表示効果アイデアソリューション

Question

図に示されているクレジット スコア 100 は、Angular.js を介してバインドされたデータです。次に、jQuery または Canvas を使用して、クレジット スコア ページに特別な効果を加える必要があります。ユーザーの開始クレジットは 100 で、小さい値は 100 です。右端の白い丸が100点を超えるとユーザーの信用スコアが増減します 100点を超えると絵は変わりません 100点未満の場合は小さな白い丸が移動します反時計回り

#たとえば、ユーザーのクレジットが 50 に分割される場合、小さな白い円は半円の中央にあり、左 1/2 の円は依然として白で、右 1/2 には他の色の効果が表示されます。
ユーザーのクレジットが75分割の場合、半円の右側の3/4円の位置に小さな白丸があり、左3/4円は白のまま、右1/4は別の色を示します効果;
つまり、関連付けられたクレジット ポイントが変化すると、円の色の変化も変化します。
この種の特殊効果を作成したい場合、jQuer または Canvas アニメーションを使用するべきでしょうか? アイデアがありません。実現方法についてアイデアを教えてください。上記の特殊効果はありますか? (他の技術的な実装方法もあります。または、同様のプラグインを使用する方がよいでしょう。プロジェクトに追いつくためにかなり追い込まれており、期限が非常に迫っています。実際にはそうではありません)やり取りを担当するエネルギーがある。1 人がアプリのフロントエンドを担当し、バックエンドとのやり取りで忙しい)

Answer 1

高校数学の本を取り出して、sin cosの内容をもう一度取り出し、関連する関数を追加すれば、解けるはずです、ふふ

Answer 2

締め切りが非常に厳しい場合は、既製のチャート ライブラリを使用してください。または、データを簡単に視覚化できる SVG アニメーション ライブラリを探すこともできます。同様の効果を実現できるはずです。

Answer 3

これを見てください:

セサミクレジット

Answer 4

キャンバスを使用してクレジットスコアを100とする割合を監視し、その割合を使用して現在の位置の弧の長さを計算します。次に、円弧の長さに基づいて中心角を見つけることができます。次に、requestanimationframe を使用してデータの初期状態を 0 に設定し、レンダリングのたびに値を均等に変更して、ページに入るときに円の位置が動的に変化する効果を実現することもできます。