javascript - penyelesaian idea kesan paparan integral jQuery atau Kanvas

Question

Skor kredit 100 seperti yang ditunjukkan dalam gambar adalah data terikat melalui Angular.js Sekarang saya perlu menggunakan jQuery atau Canvas untuk membuat kesan khas pada halaman skor kredit pengguna ialah 100, dan bulatan putih kecil berada di sebelah kanan , maka skor kredit pengguna akan meningkat atau menurun melebihi 100 mata Apabila lebih daripada 100 mata, gambar tidak akan berubah Apabila ia kurang daripada 100 mata, bulatan putih kecil akan bergerak melawan arah jam

Sebagai contoh, apabila skor kredit pengguna ialah 50, bulatan putih kecil berada di tengah separuh bulatan, 1/2 bulatan kiri masih putih, dan 1/2 kanan menunjukkan kesan warna lain

Apabila kredit pengguna skor ialah 75 Pada masa itu, bulatan putih kecil terletak 3/4 jalan ke sebelah kanan separuh bulatan, kiri 3/4 bulatan masih putih, dan 1/4 kanan menunjukkan kesan warna lain
Maksudnya, perubahan dalam warna bulatan akan mengikuti perubahan saya apabila skor kredit berubah.
Maafkan saya, jika saya ingin membuat kesan khas seperti ini, adakah saya perlu menggunakan animasi jQuer atau Canvas untuk mencapainya. Bolehkah anda memberi saya beberapa idea tentang cara mencapai kesan khas di atas? Terdapat kaedah pelaksanaan teknikal yang lain, atau terdapat pemalam Serupa yang lebih baik Saya sedang didorong kuat untuk mengejar projek dan tarikh akhir sangat ketat. Saya benar-benar tidak mempunyai tenaga untuk memberi perhatian kepada interaksi. Seorang bertanggungjawab ke atas bahagian hadapan apl dan sedang sibuk berinterface dengan bahagian belakang)

Answer 1

Keluarkan buku matematik sekolah menengah, ambil isi sin cos lagi, dan tambah fungsi yang berkaitan, anda sepatutnya boleh menyelesaikannya, hehe

Answer 2

Jika tarikh akhir sangat ketat, gunakan perpustakaan carta yang sudah siap. Atau anda boleh mencari perpustakaan animasi SVG yang boleh memvisualisasikan data dengan mudah, yang sepatutnya dapat mencapai kesan yang serupa.

Answer 3

Lihat ini:

Kredit Bijan

Answer 4

Gunakan kanvas untuk menulis dengan memantau nisbah skor kredit kepada 100, dan kemudian gunakan nisbah untuk mengira panjang lengkok kedudukan semasa. Kemudian sudut pusat boleh didapati berdasarkan panjang lengkok. Kemudian anda juga boleh menggunakan requestanimationframe untuk menetapkan keadaan awal kepada data sebagai 0, dan kemudian mengubah suai nilai secara sama rata melalui setiap pemaparan untuk mencapai kesan bulatan berubah kedudukan secara dinamik apabila memasuki halaman.