Cara mencapai contoh animasi jalur khusus di kanvas

Dalam proyek baru -baru ini, saya perlu membuat permintaan baru: realisasi animasi jalur khusus di kanvas. Jalur kustom yang disebut SO di sini tidak hanya menyertakan garis lurus, mungkin beberapa kombinasi gerakan lurus -lurus, dan bahkan termasuk kurva Bessel.

Jadi bagaimana kita bisa mencapai efek animasi ini di kanvas? Faktanya, ini sangat sederhana.

Sebelum membuat animasi, kita harus mendapatkan jalur animasi terlebih dahulu. Cukup gunakan API SVG, jadi tidak perlu memasukkannya ke halaman)

 Path const = 'M0.33.90861 25.90861.16 48.16 C70.09139.16 88.33.90861 88.56 C88.78.09139 105.90861 128.92 C150.09139 16842 16086.280.280.280.280.280.280.280.280.280.280.280.280.280.280 C108,24 96.40 96.56 C96.72 105.90861.92 128.92 C154.93 168.78 168.56 C168.33.90861 185.90861.986.986.986.986.986.986.986.986.986.986.986.986.986 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z '; Pathelement.setattributens (null, 'd', path);

Dua API yang disediakan oleh SVGPathelement sangat penting.

Metode gettotallength bisa mendapatkan panjang total svgpathelement

Metode GetPointTlength dilewatkan ke panjang x, yang akan mengembalikan koordinat ujung dari panjang titik awal SVGPathelement.

Gunakan dua API ini untuk terus memperbarui koordinat grafis yang ditarik dalam kanvas melalui siklus, dan animasi path dapat dicapai:

 Const Length. 0; const timer = setInterval (function () {if (waktu <= durasi) {const x = pathelement (pathelement.getPointTlength (langkah) .x); const y = p arseint (pathelement.getPointTlength (langkah) .y); pindahkan (x, y); // 更新 Canvas 所绘制图形的坐标 Langkah ++; , Canvas.head); closePath ();}

Akhirnya, kami merangkumnya untuk mewujudkan fungsi sederhana yang mewujudkan animasi khusus di Canvas:

 Function custMepath (path, func) {const forms = document.createelementns ('http://www.w3.org/2000/svg', path); durasi const = 1000; langkah) .x); 'M0, 0 C8.33.9961 25.90861.16 48.16 C70.09139.16 88.33.90861 88.56 C888.78.09139 C1080862 C150.09139.72 168.9862.98.98.98.98.98.98.98.98.98.98.98.98.98.98.98.98 96.40 96.56 C96.72 105.90861.92 128.92 C154.93 168.78 168.56 C168.33.90861 185.90861.93.93.16.16.09139.16.93.986.986.986.986.986.93.986.93.99.986.93.986 96 208,96 L48,96 C25.90861,96 8,78,09139 8,56 Z '; {Context.Clearrect (0, 0, Canvas.Width, Canvas.Height);

Imau menerapkan secara kasar seperti yang dijelaskan di atas, tetapi ini bukan hasil akhir. Ketika kami memutuskan untuk membuat animasi jalur khusus di kanvas, kami tidak hanya harus mempertimbangkan bagaimana mencapainya, tetapi juga mempertimbangkan optimasi kinerja. Bagaimana cara mengontrol laju bingkai ke yang optimal? dll.

Meskipun mereka tidak berada dalam ruang lingkup diskusi artikel ini, mereka harus layak dipikirkan.

Di atas adalah semua isi artikel ini.