Cara Membuat Animasi Web Berkod yang Cantik Dengan Mo.JS

Sekiranya anda ingin mulakan laman web anda sendiri , animasi yang kelihatan cantik dapat menjadikannya bersinar. Terdapat pelbagai cara untuk mencapainya, dari sekadar membuat GIF animasi dari sekeping filem yang ada, untuk belajar membuat sendiri dari awal dengan perisian seperti Pengisar atau Maya .

Terdapat juga perpustakaan yang tersedia untuk membuat animasi secara terprogram. Dari segi sejarah, pengkod web menggunakan jQuery untuk membuat animasi mudah, tetapi ketika web berkembang dan HTML5 menjadi standard baru, pilihan baru muncul. Perpustakaan CSS untuk animasi menjadi sangat kuat di bawah kerangka baru, bersama dengan perpustakaan JavaScript yang dirancang khusus untuk animasi vektor dalam penyemak imbas.

Hari ini kita akan melihat mo.js, salah satu anak baru di blok untuk membuat imejan cantik dari kod. Kami akan merangkumi beberapa fungsi asas, sebelum membuat siri animasi reaktif pengguna yang menghasilkan corak yang indah.

Masukkan Mo.js

Mo.js adalah perpustakaan untuk membuat grafik gerakan untuk web dengan mudah. Ia dirancang untuk membuat penciptaan barang-barang indah mudah bagi mereka yang tidak terlalu memahami kod, sambil membiarkan pengaturcara veteran menemui sisi seni yang tidak pernah mereka ketahui. Seperti namanya, ini berdasarkan bahasa pengaturcaraan JavaScript yang popular, walaupun diterapkan sedemikian rupa sehingga siapa pun dapat menggunakan asasnya dengan mudah.

Sebelum melangkah lebih jauh, mari kita lihat apa yang akan kita buat hari ini:

Kami akan menggunakan CodePen untuk projek hari ini, kerana ia membolehkan kita mengerjakan semua perkara di tetingkap penyemak imbas yang sama. Sekiranya anda mahu, anda boleh bekerja di penyunting pilihan anda sebaliknya. Sekiranya anda ingin melangkau tutorial langkah demi langkah, kod penuh tersedia di sini.

Siapkan Pen baru, dan anda akan disambut dengan skrin ini:

Sebelum kita memulakan, anda perlu membuat beberapa perubahan. Klik pada Tetapan ikon di kanan atas, dan arahkan ke JavaScript tab.

Kami akan menggunakan Babel sebagai pemproses kod kami, jadi pilih ini dari menu lungsur. Babel menjadikan JavaScript lebih mudah difahami, bersama dengan penyediaan ECMAScript 6 sokongan untuk penyemak imbas yang lebih lama. Sekiranya anda tidak tahu maksudnya, jangan risau , ini akan menjadikan kehidupan kita lebih mudah di sini.

Kita juga perlu mengimport perpustakaan mo.js ke dalam projek. Lakukan ini dengan mencari mo.js di dalam Tambah Skrip / Pena Luaran arahan teks, dan memilihnya.

Dengan dua perkara ini, klik Simpan dan tutup . Kami bersedia untuk memulakan!

Bentuk Asas Dengan Mo.js

Sebelum kita memulakan dengan grafik, mari lakukan sesuatu mengenai latar belakang putih yang membutakan di panel pandangan. Tukar harta warna latar dengan menulis kod ini di CSS roti.

body{  
 background: rgba(11,11,11,1);  
}

Membuat bentuk adalah proses yang mudah, dan konsep di belakangnya mendorong keseluruhan perpustakaan. Mari sediakan bentuk bulatan lalai. Masukkan kod ini ke dalam JS roti:

const redCirc = new mojs.Shape({  
 isShowStart:true  
});

Di sini, kami telah mencipta a penyambung nilai dengan nama bulatan merah dan memberikannya kepada a moj baru. Bentuk . Sekiranya anda benar-benar baru dalam pengekodan, perhatikan susunan kurungan di sini, dan jangan lupa titik koma di akhir!

Sejauh ini kami tidak mempunyai parameter kecuali isShowStart: benar , bermaksud ia akan muncul di layar bahkan sebelum kita memberikannya gerakan. Anda akan melihat bahawa ia telah meletakkan bulatan merah jambu di tengah-tengah skrin:

Lingkaran ini adalah lalai Bentuk untuk mo.js. Kami dapat mengubah bentuk ini dengan mudah dengan menambahkan garis pada kod kami:

const redCirc = new mojs.Shape({  
 isShowStart:true,  
 shape:'rect'  
});

Untuk menambahkan lebih banyak sifat ke objek, kami menggunakan koma untuk memisahkannya. Di sini, kami telah menambah a bentuk harta, dan mentakrifkannya sebagai 'betul' . Simpan pena anda, dan anda akan melihat bentuk lalai berubah menjadi segi empat sama.

Proses ini membawa nilai ke Bentuk objek adalah bagaimana kita menyesuaikannya. Sekarang ini kami mempunyai kotak yang tidak banyak berlaku. Mari cuba menjiwai sesuatu.

Asas Gerak

Untuk mendapatkan sesuatu yang kelihatan sedikit lebih mengagumkan mari sediakan bulatan, dengan lekapan merah di sekelilingnya dan tidak ada isi di dalamnya.

const redCirc = new mojs.Shape({  
 isShowStart:true,  
 stroke:'red',  
 strokeWidth:5,  
 fill:'none',  
 radius:15  
});

Seperti yang anda lihat, kami juga telah menetapkan a lebar nilai untuk strok, dan a jejari untuk bulatan. Perkara sudah mula kelihatan sedikit berbeza. Sekiranya bentuk anda tidak diperbaharui, pastikan anda tidak ketinggalan koma atau tanda petik tunggal 'bersih' atau 'tiada' , dan pastikan anda telah mengklik berjimat di bahagian atas halaman.

Mari tambah animasi untuk ini. Dalam contoh di atas, bulatan merah ini muncul di mana pengguna mengklik, sebelum memudar ke luar. Salah satu cara untuk mewujudkannya adalah dengan mengubah radius dan kelegapan dari masa ke masa. Mari ubah kod:

 radius: {15:30},  
 opacity: {1:0},  
 duration:1000

Dengan menukar jejari harta benda, dan menambah kelegapan dan jangka masa sifat, kami telah memberikan arahan bentuk untuk dilaksanakan dari masa ke masa. Ini adalah Delta objek, menyimpan maklumat awal dan akhir untuk sifat-sifat ini.

Anda akan melihat bahawa belum ada yang berlaku. Ini kerana kami belum menambahkan .main () berfungsi untuk memintanya untuk melaksanakan arahan kami. Tambahkan di antara tanda kurung akhir dan titik koma, dan anda mesti melihat lingkaran anda hidup.

Sekarang kita sampai di suatu tempat, tetapi untuk menjadikannya sangat istimewa, mari kita lihat beberapa kemungkinan yang lebih mendalam.

Membuat Pesanan dan Kemudahan Dengan Mo.js

Sekarang, sebaik sahaja lingkaran itu muncul, ia akan semakin pudar. Ini akan berfungsi dengan baik, tetapi ada baiknya mempunyai sedikit kawalan.

Kita boleh melakukan ini dengan .kemudian () fungsi. Daripada mengubah radius atau kelegapan kita, mari kita menjadikan bentuk kita tetap seperti semula, sebelum berubah setelah jangka waktu yang ditentukan.

const redCirc = new mojs.Shape({  
 isShowStart:true,  
 stroke:'red',  
 strokeWidth:5,  
 fill:'none',  
 radius: 15,  
 duration:1000  
}).then({  
 //do more stuff here  
}).play();

Sekarang, bentuk kita akan muncul dengan nilai yang telah kita tetapkan, tunggu 1000 ms, sebelum melakukan apa sahaja yang kita masukkan .kemudian () fungsi. Mari tambahkan beberapa arahan antara tanda kurung:

 //do more stuff here  
 strokeWidth: 0,  
 scale: { 1: 2, easing: 'sin.in' },  
 duration: 500

Kod ini memperkenalkan bahagian penting animasi yang lain. Di mana kita telah mengarahkan skala untuk berubah dari 1 hingga 2, kami juga menetapkan pelonggaran berdasarkan gelombang sinus dengan dosa.in . Mo.js mempunyai pelbagai kurva pelonggaran yang terpasang, dengan kemampuan pengguna maju untuk menambahkannya sendiri. Dalam kes ini, skala dari masa ke masa berlaku mengikut gelombang sinus yang melengkung ke atas.

Untuk visual yang melengkung dari lengkung yang berbeza, lihat easings.net . Gabungkan ini dengan Lebar strok berubah menjadi 0 melebihi jangka masa yang ditetapkan, dan anda mempunyai kesan hilang yang jauh lebih dinamik.

Bentuk adalah asas bagi semua yang ada di Mo.js, tetapi mereka hanyalah permulaan cerita. Mari lihat Pecah .

Meletup Dengan Potensi di Mo.js

KE Pecah di Mo.js adalah kumpulan bentuk yang berasal dari titik pusat. Kami akan menjadikan ini sebagai asas animasi selesai kami. Anda boleh memanggil letusan lalai dengan cara yang sama seperti bentuk anda. Mari buat beberapa percikan api:

const sparks = new mojs.Burst({  
}).play();

Anda dapat melihat, hanya dengan menambahkan kosong Pecah objek dan menyuruhnya bermain, kita mendapat kesan letupan lalai. Kita boleh mempengaruhi ukuran dan putaran pecah dengan menganimasikannya jejari dan sudut sifat:

const sparks = new mojs.Burst({  
 radius: {0:30, easing:'cubic.out'},  
 angle:{0: 90,easing:'quad.out'},  
}).play();

Sudah, kami telah menambahkan jari-jari dan putaran khusus pada ledakan kami:

Untuk menjadikannya kelihatan seperti bunga api, mari kita ubah bentuk yang digunakan oleh pecah, dan berapa banyak bentuk yang dihasilkan oleh letupan. Anda melakukan ini dengan menangani sifat-sifat anak-anak pecah.

const sparks = new mojs.Burst({  
 radius: {0:30, easing:'cubic.out'},  
 angle:{0: 90,easing:'quad.out'},  
 count:50,  
 children:{  
 shape: 'cross',  
 stroke: 'white',  
 points: 12,  
 radius:10,  
 fill:'none',  
 angle:{0:360},  
 duration:300  
 }  
}).play();

Anda akan melihat bahawa sifat anak sama dengan sifat bentuk yang telah kita bekerjasama. Kali ini kami telah memilih salib sebagai bentuknya. Semua 50 bentuk ini kini mempunyai sifat yang sama. Ia mula kelihatan cantik! Ini adalah perkara pertama yang akan dilihat oleh pengguna apabila mereka mengklik tetikus.

Walaupun kita dapat melihat bahawa corak merah awal kita bulatan merah bentuk tetap terlalu lama. Cuba ubah tempohnya agar kedua-dua animasi itu sesuai. Ia mesti kelihatan seperti ini:

Kita masih belum selesai dengan animasi kita, tetapi mari kita luangkan masa untuk menjadikannya reaktif pengguna.

Acara Utama

Kami akan menggunakan pengendali acara untuk mencetuskan animasi kami pada kedudukan yang diklik pengguna. Di akhir blok kod anda, tambahkan ini:

document.addEventListener( 'click', function(e) {  
});

Bahagian kod ini mendengarkan klik tetikus, dan melaksanakan apa sahaja arahan yang ada dalam kurungan untuk kita. Kita boleh menambah bulatan merah dan bunga api objek kepada pendengar ini.

document.addEventListener( 'click', function(e) {  
 redCirc  
 .tune({ x: e.pageX, y: e.pageY, })  
 .replay();  
 sparks  
 .tune({ x: e.pageX, y: e.pageY })  
 .replay();  
});

Dua fungsi yang kami sebut di sini adalah .tune () dan .replay () . Fungsi replay mirip dengan fungsi play, walaupun menentukan bahawa animasi harus dimulakan lagi dari awal setiap kali diklik.

The menala fungsi menyampaikan nilai ke objek kami sehingga anda dapat mengubah sesuatu ketika ia dicetuskan. Dalam kes ini, kita memasukkan koordinat halaman di mana tetikus diklik, dan menetapkan kedudukan x dan y animasi kita dengan sewajarnya. Simpan kod anda, dan cuba klik pada skrin. Anda akan melihat beberapa masalah.

Pertama, animasi awal kami masih muncul di tengah-tengah skrin, walaupun pengguna tidak mengklik apa-apa. Kedua, animasi tidak dipicu pada titik tetikus, tetapi diimbangi ke bawah dan ke kanan. Kami dapat memperbaiki kedua-dua perkara ini dengan mudah.

Bentuk dan pecah kita mempunyai .main () pada akhir blok kod masing-masing. Kami tidak memerlukan ini lagi .replay () dipanggil dalam pengendali acara. Anda boleh membuang .play () dari kedua blok kod. Atas sebab yang sama, anda boleh membuang isShowStart: benar juga, kerana kita tidak lagi memerlukannya untuk ditunjukkan pada awalnya.

Untuk menyelesaikan masalah kedudukan kita perlu menetapkan nilai kedudukan untuk objek kita. Seperti yang anda akan ingat dari bentuk pertama kami, mo.js meletakkannya di tengah halaman secara lalai. Apabila nilai-nilai ini digabungkan dengan kedudukan tetikus, ia akan menghasilkan ofset. Untuk menghilangkan offset ini, cukup tambahkan baris ini ke kedua-dua bulatan merah dan bunga api objek:

left: 0,  
top: 0,

Sekarang satu-satunya nilai kedudukan yang diambil oleh objek kita adalah nilai kedudukan tetikus yang diteruskan oleh pendengar acara. Sekarang perkara harus berjalan lebih baik.

Proses menambahkan objek ke dalam pengendali acara adalah bagaimana kita akan mencetuskan semua animasi kita, jadi ingatlah untuk menambah setiap objek baru dari sekarang! Sekarang kita mempunyai asas-asas yang berfungsi seperti yang kita mahukan, mari kita tambahkan beberapa ledakan yang lebih besar dan lebih cerah.

Mendapatkan Psikedelik

Mari mulakan dengan beberapa segitiga berputar. Idea di sini adalah untuk mewujudkan kesan stroboskopi hipnotis, dan menyiapkannya sebenarnya cukup mudah. Tambahkan ledakan lain dengan parameter ini:

const triangles = new mojs.Burst({  
 radius: { 0 : 1000,easing: 'cubic.out'},  
 angle: {1080 : 0,easing: 'quad.out'},  
 left: 0, top: 0,  
 count: 20,  
 children : {  
 shape: 'polygon',  
 points: 3,  
 radius: { 10 : 100 },  
 fill: ['red','yellow','blue','green'],  
 duration: 3000  
 }  
});

Segala-galanya di sini semestinya sudah cukup diketahui, walaupun ada beberapa perkara baru. Anda akan melihat bahawa daripada mendefinisikan bentuknya sebagai segitiga, kita menyebutnya a poligon sebelum memberikan bilangan mata ia mempunyai sebagai 3.

Kami juga telah memberi isi berfungsi pelbagai warna untuk digunakan, setiap segitiga kelima akan kembali menjadi merah dan corak akan berterusan. Nilai tinggi dari sudut tetapan menjadikan putaran pecah cukup pantas untuk menghasilkan kesan stroboskopiknya.

Sekiranya kod tidak berfungsi untuk anda, pastikan anda telah menambahkan objek segitiga ke kelas pendengar acara seperti yang kami lakukan dengan objek sebelumnya.

Cukup psychedelic! Mari tambah letupan lain untuk mengikutinya.

Pentagon Menari

Kita boleh menggunakan sesuatu yang hampir sama dengan kita segi tiga objek untuk membuat pecah yang mengikutinya. Kod yang sedikit diubah suai ini menghasilkan heksagon berputar bertindih berwarna terang:

const pentagons = new mojs.Burst({  
 radius: { 0 : 1000,easing: 'cubic.out'},  
 angle: {0 : 720,easing: 'quad.out'},  
 left: 0, top: 0,  
 count: 20,  
 children : {  
 shape: 'polygon',  
 radius: { 1 : 300 },  
 points: 5,  
 fill: ['purple','pink','yellow','green'],  
 delay:500,  
 duration: 3000  
 }  
});

Perubahan utama di sini ialah kita telah menambah a kelewatan 500ms, sehingga pecah tidak akan bermula sehingga selepas segitiga. Dengan mengubah beberapa nilai, ide di sini adalah untuk membuat putaran pecah ke arah yang berlawanan dengan segitiga. Dengan kemalangan gembira, pada saat pentagon muncul, kesan stroboskopik segitiga membuatnya kelihatan seperti berputar bersama.

Kebiasaan Sedikit

Mari tambah kesan yang menggunakan nilai rawak. Buat ledakan dengan sifat-sifat ini:

const redSparks = new mojs.Burst({  
 left: 0, top: 0,  
 count:8,  
 radius: { 150: 350 },  
 angle: {0:90 ,easing:'cubic.out'},  
 children: {  
 shape: 'line',  
 stroke: {'red':'transparent'},  
 strokeWidth: 5,  
 scaleX: {0.5:0},  
 degreeShift: 'rand(-90, 90)',  
 radius: 'rand(20, 300)',  
 duration: 500,  
 delay: 'rand(0, 150)',  
 }  
});

Letusan ini akan membuat garis-garis yang mulai merah dan pudar ke ketelusan, menyusut dari masa ke masa. Apa yang menjadikan komponen ini menarik adalah bahawa nilai rawak digunakan untuk menentukan beberapa sifatnya.

The pergeseran darjah memberikan objek permulaan sudut kepada kanak-kanak. Dengan mengacak ini, ia memberikan ledakan yang sama sekali berbeza pada setiap klik. Nilai rawak juga digunakan untuk jejari dan kelewatan berfungsi untuk menambah kesan kekacauan.

Inilah kesannya dengan sendirinya:

Oleh kerana kita menggunakan nilai rawak di sini, kita perlu menambahkan kaedah tambahan pada pengendali acara kita untuk objek:

redSparks  
 .tune({ x: e.pageX, y: e.pageY })  
 .replay()  
 .generate();

The menjana () fungsi mengira nilai rawak segar setiap kali acara dipanggil. Tanpa ini, bentuknya akan memilih nilai rawak pada kali pertama dipanggil, dan terus menggunakan nilai tersebut untuk setiap panggilan berikutnya. Ini akan merosakkan kesannya, jadi pastikan anda menambahkannya!

Anda boleh menggunakan nilai rawak untuk hampir setiap elemen objek mo.js, dan ini adalah kaedah mudah untuk membuat animasi unik.

cara menggunakan ssd dan hdd bersama

Randomness bukan satu-satunya cara untuk menambahkan pergerakan dinamik ke animasi. Mari kita lihat berperingkat fungsi.

Garisan yang mengejutkan

Untuk menunjukkan bagaimana berperingkat fungsi berfungsi, kita akan membuat sesuatu seperti Catherine Wheel. Buat ledakan baru dengan parameter ini:

const lines = new mojs.Burst({  
 radius: { 0 : 1000,easing: 'cubic.out'},  
 angle: {0 : 1440,easing: 'cubic.out'},  
 left: 0, top: 0,  
 count: 50,  
 children : {  
 shape: 'line',  
 radius: { 1 : 100,easing:'elastic.out' },  
 fill: 'none',  
 stroke: ['red','orange'],  
 delay:'stagger(10)',  
 duration: 1000  
 }  
});

Segala-galanya di sini sudah diketahui sekarang, ledakan menghasilkan 50 kanak-kanak yang berwarna merah atau oren. Perbezaan di sini adalah kita lulus kelewatan harta benda a berperingkat (10) fungsi. Ini menambahkan kelewatan 10ms antara pelepasan setiap anak, memberikan kesan putaran yang kita cari.

Fungsi stagger tidak menggunakan sebarang nilai rawak, jadi anda tidak memerlukannya menjana berfungsi dalam pengendali acara kali ini. Mari lihat semua yang kita miliki sejauh ini:

Kita boleh berhenti di sini dengan mudah, tetapi mari kita tambahkan satu lagi ledakan untuk menyelesaikan projek ini.

Petak Pintar

Untuk ledakan terakhir ini, mari buat sesuatu menggunakan segi empat tepat. Tambahkan objek ini ke kod dan pendengar acara anda:

const redSquares = new mojs.Burst({  
 radius: { 0 : 1000,easing: 'cubic.out'},  
 angle: {360 : 0,easing: 'quad.out'},  
 left: 0, top: 0,  
 count: 20,  
 children : {  
 shape: 'rect',  
 radiusX: { 1 : 1000 },  
 radiusY:50,  
 points: 5,  
 fill: 'none',  
 stroke: {'red':'orange'},  
 strokeWidth:{5:15},  
 delay:1000,  
 duration: 3000  
 }  
});

Objek ini tidak menambah sesuatu yang baru pada apa yang telah kita kerjakan hari ini, ia disertakan hanya untuk menunjukkan bagaimana corak geometri kompleks dapat dibuat dengan mudah melalui kod.

Ini bukan hasil yang diharapkan dari objek ini ketika ia dibuat pada peringkat ujian menulis tutorial ini. Setelah kod itu berjalan, menjadi jelas bahawa saya tersandung pada sesuatu yang jauh lebih indah daripada yang saya boleh buat dengan sengaja!

Dengan objek akhir ini ditambah, kita selesai. Mari kita lihat semuanya dalam tindakan.

Mo.js: Alat Kuat untuk Animasi Web

Pengenalan ringkas untuk mo.js ini merangkumi alat asas yang diperlukan untuk membuat animasi yang indah. Cara alat-alat itu digunakan dapat membuat hampir semua perkara, dan untuk banyak tugas perpustakaan web adalah alternatif mudah untuk digunakan Photoshop , After Effects, atau perisian lain yang mahal.

Perpustakaan ini berguna untuk mereka yang bekerja dalam pengaturcaraan dan pengembangan web, penanganan acara yang digunakan dalam projek dapat dengan mudah digunakan untuk membuat butang dan teks reaktif di laman web atau aplikasi. Bersenang-senang dengannya: tidak ada kesilapan, hanya kemalangan yang membahagiakan!

Berkongsi Berkongsi Tweet E-mel Adakah Perlu Ditingkatkan ke Windows 11?

Windows telah direka bentuk semula. Tetapi apakah itu cukup untuk meyakinkan anda untuk beralih dari Windows 10 ke Windows 11?

Baca Seterusnya Topik-topik yang berkaitan

Pengaturcaraan
JavaScript

Mengenai Pengarang Ian Buckley(216 Artikel Diterbitkan)

Ian Buckley adalah wartawan bebas, pemuzik, pemain dan penerbit video yang tinggal di Berlin, Jerman. Ketika dia tidak menulis atau di atas pentas, dia bermain-main dengan elektronik DIY atau kod dengan harapan menjadi saintis gila.

Lagi Dari Ian Buckley

Langgan buletin kami

Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!

Klik di sini untuk melanggan