javascript - Solution d'idée d'effet d'affichage intégral jQuery ou Canvas

Question

Le score de crédit de 100, comme indiqué sur l'image, est lié aux données via Angular.js. Maintenant, je dois utiliser jQuery ou Canvas pour créer un effet spécial sur la page de score de crédit. Le crédit de départ de l'utilisateur est de 100 et le petit cercle blanc. est à l'extrême droite. , alors le score de crédit de l'utilisateur augmentera ou diminuera au-dessus de 100 points, lorsqu'il est supérieur à 100 points, l'image ne changera pas. Lorsqu'il est inférieur à 100 points, le petit cercle blanc se déplacera dans le sens inverse des aiguilles d'une montre.

Par exemple, lorsque le pointage de crédit de l'utilisateur est de 50, le petit cercle blanc est au milieu du demi-cercle, le 1/2 cercle gauche est toujours blanc et le 1/2 droit affiche d'autres effets de couleur ; le score est de 75. À ce moment-là, le petit cercle blanc est situé aux 3/4 à droite du demi-cercle, le 3/4 gauche du cercle est toujours blanc et le 1/4 droit montre d'autres effets de couleur ; C'est-à-dire que le changement de couleur du cercle suivra mes modifications au fur et à mesure que votre cote de crédit change.

Excusez-moi, si je veux créer ce genre d'effets spéciaux, dois-je utiliser l'animation jQuer ou Canvas pour y parvenir ? Je n'ai aucune idée sur la façon de réaliser les effets spéciaux ci-dessus ( Il existe d'autres méthodes de mise en œuvre technique, ou il existe des plug-ins similaires, c'est mieux. Je suis poussé à rattraper le retard sur le projet et le délai est très serré, je n'ai vraiment pas l'énergie de prêter attention à l'interaction. Une personne est responsable du front-end d'une application et est occupée à interagir avec le back-end)

Answer 1

Sortez le livre de mathématiques du lycée, reprenez le contenu sin cos et ajoutez les fonctions associées, vous devriez pouvoir le résoudre, hehe

Answer 2

Si le délai est très serré, utilisez une bibliothèque de graphiques prête à l'emploi. Ou vous pouvez rechercher une bibliothèque d'animation SVG capable de visualiser facilement les données, ce qui devrait permettre d'obtenir des effets similaires.

Answer 3

Regardez ceci :

Crédit Sésame

Answer 4

Utilisez Canvas pour écrire en surveillant le rapport entre la cote de crédit et 100, puis utilisez le rapport pour calculer la longueur de l'arc de la position actuelle. Ensuite, l'angle central peut être trouvé en fonction de la longueur de l'arc. Ensuite, vous pouvez également utiliser requestanimationframe pour définir l'état initial des données sur 0, puis modifier la valeur uniformément à chaque rendu pour obtenir l'effet du cercle changeant dynamiquement de position lors de l'entrée dans la page.