Javascript – Ideenlösung für integrierte jQuery- oder Canvas-Anzeigeeffekte

Question

Der Kredit-Score von 100, wie im Bild gezeigt, ist über Angular.js datengebunden. Jetzt muss ich jQuery oder Canvas verwenden, um einen Spezialeffekt auf der Kredit-Score-Seite des Benutzers zu erzielen, und der kleine weiße Kreis steht ganz rechts, dann steigt oder sinkt die Kreditwürdigkeit des Benutzers über 100 Punkte, ändert sich das Bild nicht, wenn sie weniger als 100 Punkte beträgt, bewegt sich der kleine weiße Kreis gegen den Uhrzeigersinn

Wenn die Kreditwürdigkeit des Benutzers beispielsweise 50 beträgt, befindet sich der kleine weiße Kreis in der Mitte des Halbkreises, die linke Hälfte des Kreises ist immer noch weiß und die rechte Hälfte zeigt andere Farbeffekte.

Wenn die Kreditwürdigkeit des Benutzers beträgt Die Punktzahl beträgt 75. Zu diesem Zeitpunkt befindet sich der kleine weiße Kreis 3/4 rechts vom Halbkreis, die linken 3/4 des Kreises sind noch weiß und das rechte Viertel zeigt andere Farbeffekte
Das heißt, die Änderung der Farbe des Kreises folgt meinen Änderungen, wenn sich die Kreditwürdigkeit ändert.
Entschuldigen Sie, wenn ich diese Art von Spezialeffekten erstellen möchte, sollte ich dazu jQuer oder Canvas-Animationen verwenden? Können Sie mir einige Ideen geben, wie ich die oben genannten Spezialeffekte erzielen kann? Es gibt andere technische Implementierungsmethoden, oder es gibt ähnliche Plug-Ins, die besser sind. Ich werde stark gedrängt, das Projekt nachzuholen, und die Frist ist wirklich sehr knapp. Eine Person ist für das Front-End einer App verantwortlich und beschäftigt sich mit der Schnittstelle zum Back-End)

Answer 1

把高中数学书拿出来，把sin cos 这些内容重新捡起来，再加上相关函数，应该就可以解决了，嘿嘿

Answer 2

deadline很紧的话，上现成的图表库嘛。或者你找找有没有可以轻松做视觉化数据的SVG动画库，应该也能实现类似的效果。

Answer 3

看看这个：

芝麻信用

Answer 4

用canvas来写吧 通过监控信用分数与100的比例，然后已比例来算出当前应该在的位置的圆弧长度。再根据圆弧长度可以求出圆心角了。然后你还可以通过requestanimationframe 可以初始状态设为数据设为0，然后通过每次render去均匀修改值，达到进页面的时候圆圈动态变化位置的效果。