Artikel ini terutama memperkenalkan tutorial tentang penggunaan kanvas di HTML5 untuk menggambar gerakan partikel dengan rumus, dan membutuhkan kode JavaScript sebagai rumus. Teman yang membutuhkannya bisa merujuknya
Baru -baru ini saya ingin membuat halaman web dan meletakkan beberapa demo yang saya lakukan dalam proses belajar HTML5 untuk membuat koleksi. Namun, jika saya hanya membuat halaman web dan mengatur semua demo satu per satu, itu akan terasa terlalu buruk. Saya hanya berpikir, karena saya telah belajar kanvas, mari kita main -main dengan browser dan membuat animasi pembuka kecil.
Saya memikirkan efek animasi pembuka untuk sementara waktu dan memutuskan untuk menggunakan partikel karena saya pikir partikel lebih menyenangkan. Saya masih ingat posting blog teknis pertama yang saya tulis sebelumnya, yaitu tentang gambar teks seperti partikel: gambar teks seperti partikel, dan kemudian saya hanya melakukan gerakan linier, dan menambahkan sedikit efek 3D. Formula gerakannya sederhana. Jadi saya hanya ingin membuat animasi pembuka ini lebih dinamis.
Pergi ke demo terlebih dahulu: http://2.axescanvas.sinaapp.com/demohome/index.html
Apakah efeknya lebih dinamis daripada gerakan garis lurus? Dan memang sangat sederhana. Jangan lupa judul posting blog ini, formula kecil, dan kesenangan yang luar biasa. Untuk mencapai efek seperti itu, kami hanya menggunakan sekolah menengah pertama. . Atau pengetahuan fisika di sekolah menengah, formula untuk mempercepat gerakan dan melambat gerakan. Jadi itu memang formula kecil. Poster itu suka mengacaukan beberapa hal keren. Meskipun mungkin tidak berguna di tempat kerja, kesenangan ini sangat menarik. Selain itu, melakukan ini juga dapat meningkatkan kemampuan berpikir pemrograman Anda.
Tanpa basa -basi lagi, saya akan pergi ke topik. Jelaskan secara singkat prinsipnya ~~~
Kode inti gerakan partikel hanya ini:
Kode XML/HTML Salin Konten ke Clipboard