Cara Membuat Animasi Web Berkode yang Indah Dengan Mo.JS

Jika Anda mencari mulai situs web Anda sendiri , animasi yang tampak cantik dapat membuatnya bersinar. Ada beberapa cara untuk mencapai ini, dari hanya membuat animasi GIF dari sepotong film yang ada, hingga belajar membuat sendiri dari awal dengan perangkat lunak seperti blender atau Maya .

Ada juga perpustakaan yang tersedia untuk membuat animasi secara terprogram. Secara historis, pembuat kode web menggunakan jQuery untuk membuat animasi sederhana, tetapi seiring dengan perkembangan web dan HTML5 menjadi standar baru, opsi segar muncul. Pustaka CSS untuk animasi menjadi sangat kuat di bawah kerangka kerja baru, bersama dengan pustaka JavaScript yang dirancang khusus untuk animasi vektor di browser.

Hari ini kita akan melihat mo.js, salah satu anak baru di blok untuk membuat citra yang indah dari kode. Kami akan membahas beberapa fungsi dasar, sebelum membuat rangkaian animasi reaktif pengguna yang menciptakan pola yang indah.

Masukkan Mo.js

Mo.js adalah perpustakaan untuk membuat grafik gerak untuk web dengan mudah. Ini dirancang untuk membuat hal-hal indah menjadi sederhana bagi mereka yang tidak terlalu paham kode, sementara memungkinkan programmer veteran untuk menemukan sisi artistik yang tidak pernah mereka ketahui sebelumnya. Seperti namanya, ini didasarkan pada bahasa pemrograman JavaScript yang populer, meskipun diimplementasikan sedemikian rupa sehingga siapa pun dapat mempelajari dasar-dasarnya dengan mudah.

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

Kami akan menggunakan pena kode untuk proyek hari ini, karena memungkinkan kita untuk mengerjakan semuanya di jendela browser yang sama. Jika Anda mau, Anda dapat bekerja di editor pilihan Anda sebagai gantinya. Jika Anda ingin melewatkan tutorial langkah demi langkah, kode lengkapnya tersedia di sini.

Siapkan Pena baru, dan Anda akan disambut dengan layar ini:

Sebelum kita mulai, Anda harus membuat beberapa perubahan. Klik pada Pengaturan ikon di kanan atas, dan navigasikan ke JavaScript tab.

Kami akan menggunakan Babel sebagai pra-prosesor kode kami, jadi pilih ini dari menu tarik-turun. Babel membuat JavaScript sedikit lebih mudah dipahami, bersama dengan menyediakan ECMAScript 6 dukungan untuk browser lama. Jika Anda tidak tahu apa artinya, jangan khawatir , itu hanya akan membuat hidup kita sedikit lebih mudah di sini.

Kita juga perlu mengimpor perpustakaan mo.js ke dalam proyek. Lakukan ini dengan mencari mo.js dalam Tambahkan Skrip/Pena Eksternal teks prompt, dan memilihnya.

Dengan dua hal ini, klik Simpan dan tutup . Kami siap untuk memulai!

Bentuk Dasar Dengan Mo.js

Sebelum kita mulai dengan grafik, mari kita lakukan sesuatu tentang latar belakang putih yang menyilaukan di panel tampilan. Ubah properti warna latar belakang dengan menulis kode ini di CSS roti.

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

Membuat bentuk adalah proses yang sederhana, dan konsep di baliknya mendorong seluruh perpustakaan. Mari kita siapkan bentuk lingkaran default. Masukkan kode ini ke dalam JS roti:

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

Di sini, kami telah membuat konstan nilai dengan nama lingkaran merah dan menugaskannya ke a mojs.Shape baru . Jika Anda benar-benar baru dalam pengkodean, perhatikan urutan braket di sini, dan jangan lupa titik koma di akhir!

Sejauh ini kami tidak melewati parameter apa pun kecuali isShowStart: benar , artinya akan muncul di layar bahkan sebelum kita menetapkan gerakan apa pun. Anda akan melihat bahwa itu telah menempatkan lingkaran merah muda di tengah layar:

Lingkaran ini adalah default Membentuk untuk mo.js. Kita dapat mengubah bentuk ini dengan mudah dengan menambahkan baris ke kode kita:

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

Untuk menambahkan lebih banyak properti ke objek, kami menggunakan koma untuk memisahkannya. Di sini, kami telah menambahkan membentuk properti, dan mendefinisikannya sebagai 'lurus' . Simpan pena Anda, dan Anda akan melihat bentuk default berubah menjadi persegi.

Proses meneruskan nilai ini ke Membentuk objek adalah bagaimana kita menyesuaikannya. Saat ini kami memiliki kotak yang tidak banyak berguna. Mari kita coba menganimasikan sesuatu.

Dasar-dasar Gerak

Untuk mendapatkan sesuatu yang terlihat sedikit lebih mengesankan, mari kita buat lingkaran, dengan goresan merah di sekelilingnya dan tanpa isian 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 lebar nilai stroke, dan a radius untuk lingkaran. Hal-hal sudah mulai terlihat sedikit berbeda. Jika bentuk Anda tidak diperbarui, pastikan Anda tidak melewatkan koma atau tanda kutip tunggal di sekitarnya 'bersih' atau 'tidak ada' , dan pastikan Anda telah mengklik menyimpan di bagian atas halaman.

Mari tambahkan animasi untuk ini. Pada contoh di atas, lingkaran merah ini muncul di tempat pengguna mengklik, sebelum memudar keluar. Salah satu cara kita bisa mewujudkannya adalah dengan mengubah radius dan opacity dari waktu ke waktu. Mari kita ubah kodenya:

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

Dengan mengubah radius properti, dan menambahkan kegelapan dan durasi properti, kami telah memberikan instruksi bentuk untuk dilakukan dari waktu ke waktu. Ini adalah Delta objek, memegang informasi awal dan akhir untuk properti ini.

Anda akan melihat bahwa belum ada yang terjadi. Ini karena kami belum menambahkan .bermain() berfungsi untuk memberitahunya untuk melaksanakan instruksi kami. Tambahkan di antara tanda kurung akhir dan titik koma, dan Anda akan melihat lingkaran Anda menjadi hidup.

Sekarang kita mencapai suatu tempat, tetapi untuk membuatnya benar-benar istimewa, mari kita lihat beberapa kemungkinan yang lebih mendalam.

Memesan dan Memudahkan Dengan Mo.js

Saat ini, begitu lingkaran itu muncul, lingkaran itu mulai memudar. Ini akan bekerja dengan sangat baik, tetapi akan menyenangkan untuk memiliki sedikit lebih banyak kontrol.

Kita bisa melakukannya dengan .kemudian() fungsi. Daripada mengubah radius atau opacity kita, mari kita buat bentuk kita tetap di tempat awalnya, sebelum berubah setelah 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 pun yang kita masukkan ke dalam .kemudian() fungsi. Mari tambahkan beberapa instruksi di antara tanda kurung:

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

Kode ini memperkenalkan bagian penting lain dari animasi. Di mana kami telah menginstruksikan skala untuk mengubah dari 1 ke 2, kami juga telah menetapkan easing berbasis gelombang sinus dengan sin.in . Mo.js memiliki berbagai kurva easing bawaan, dengan kemampuan bagi pengguna tingkat lanjut untuk menambahkan kurva mereka sendiri. Dalam hal ini, skala dari waktu ke waktu terjadi sesuai dengan gelombang sinus yang melengkung ke atas.

Untuk tampilan visual dari kurva yang berbeda, lihat easings.net . Gabungkan ini dengan strokeLebar berubah menjadi 0 selama durasi yang kami tetapkan, dan Anda memiliki efek menghilang yang jauh lebih dinamis.

Bentuk adalah dasar untuk segala sesuatu di Mo.js, tetapi itu hanyalah awal dari cerita. Mari lihat ledakan .

Penuh Potensi di Mo.js

KE Meletus di Mo.js adalah kumpulan bentuk yang berasal dari titik pusat. Kita akan menjadikan ini sebagai dasar dari animasi kita yang telah selesai. Anda dapat memanggil burst default dengan cara yang sama seperti Anda melakukan bentuk. Mari kita membuat beberapa percikan:

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

Anda dapat melihat, hanya dengan menambahkan yang kosong Meletus objek dan menyuruhnya untuk bermain, kita mendapatkan efek burst default. Kami dapat memengaruhi ukuran dan rotasi ledakan dengan menganimasikannya radius dan sudut properti:

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

Sudah, kami telah menambahkan radius dan putaran khusus ke ledakan kami:

Untuk membuatnya lebih terlihat seperti bunga api, mari ubah bentuk yang digunakan burst, dan berapa banyak bentuk yang dihasilkan burst. Anda melakukan ini dengan menangani properti anak-anak burst.

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 bahwa properti anak sama dengan properti bentuk yang telah kita kerjakan. Kali ini kita telah memilih salib sebagai bentuknya. Semua 50 bentuk ini sekarang memiliki sifat yang sama. Ini mulai terlihat cukup bagus! Ini adalah hal pertama yang akan dilihat pengguna ketika mereka mengklik mouse.

Meskipun kita sudah bisa melihat goresan merah inisial kita lingkaran merah bentuknya bertahan terlalu lama. Coba ubah durasinya agar kedua animasi cocok bersama. Seharusnya terlihat seperti ini:

Kita masih jauh dari selesai dengan animasi kita, tapi mari kita luangkan waktu sejenak untuk membuatnya menjadi user-reactive.

Acara Utama

Kami akan menggunakan event handler untuk memicu animasi kami pada posisi yang diklik pengguna. Di akhir blok kode Anda, tambahkan ini:

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

Potongan kode ini mendengarkan klik mouse, dan menjalankan instruksi apa pun yang ada di dalam kurung untuk kita. Kami dapat menambahkan kami lingkaran merah dan percikan api objek untuk 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 .lagu() dan .memutar ulang() . Fungsi replay mirip dengan fungsi play, meskipun menentukan bahwa animasi harus dimulai lagi dari awal setiap kali diklik.

NS lagu fungsi meneruskan nilai ke objek kami sehingga Anda dapat mengubah berbagai hal saat dipicu. Dalam hal ini kita melewati koordinat halaman di mana mouse diklik, dan menetapkan posisi x dan y dari animasi kita. Simpan kode Anda, dan coba klik di layar. Anda akan melihat beberapa masalah.

Pertama, animasi awal kami masih muncul di tengah layar, bahkan jika pengguna tidak mengklik apa pun. Kedua, animasi tidak dipicu pada titik mouse, tetapi diimbangi ke bawah dan ke kanan. Kita bisa memperbaiki kedua hal ini dengan mudah.

Bentuk dan ledakan kami memiliki .bermain() di akhir blok kode masing-masing. Kami tidak membutuhkan ini lagi karena .memutar ulang() sedang dipanggil di event handler. Anda dapat menghapus .play() dari kedua blok kode. Untuk alasan yang sama, Anda dapat menghapus isShowStart: benar juga, karena kita tidak lagi membutuhkannya untuk ditampilkan di awal.

Untuk memperbaiki masalah pemosisian, kita perlu menetapkan nilai posisi untuk objek kita. Seperti yang akan Anda ingat dari bentuk pertama kami, mo.js menempatkannya di tengah halaman secara default. Ketika nilai-nilai ini digabungkan dengan posisi mouse, itu menciptakan offset. Untuk menghilangkan offset ini, cukup tambahkan baris ini ke keduanya lingkaran merah dan percikan api objek:

left: 0,  
top: 0,

Sekarang satu-satunya nilai posisi yang diambil objek kita adalah nilai posisi mouse yang diteruskan oleh pendengar acara. Sekarang hal-hal harus bekerja jauh lebih baik.

Proses menambahkan objek ke dalam event handler ini adalah bagaimana kita akan memicu semua animasi kita, jadi ingat untuk menambahkan setiap objek baru mulai sekarang! Sekarang setelah kita memiliki dasar-dasar yang bekerja seperti yang kita inginkan, mari tambahkan beberapa semburan yang lebih besar dan lebih cerah.

Mendapatkan Psychedelic

Mari kita mulai dengan beberapa segitiga berputar. Idenya di sini adalah untuk menciptakan efek stroboskopik hipnosis, dan pengaturan ini 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  
 }  
});

Semuanya di sini seharusnya sudah cukup akrab sekarang, meskipun ada beberapa poin baru. Anda akan melihat bahwa alih-alih mendefinisikan bentuk sebagai segitiga, kami menyebutnya sebagai poligon sebelum menetapkan jumlah poin memiliki sebagai 3.

Kami juga telah memberikan mengisi fungsi array warna untuk bekerja dengan, setiap segitiga kelima akan kembali ke merah dan pola akan berlanjut. Tingginya nilai sudut pengaturan membuat burst berputar cukup cepat untuk menghasilkan efek stroboskopiknya.

Jika kode tidak bekerja untuk Anda, pastikan Anda telah menambahkan objek segitiga ke kelas pendengar acara seperti yang kita lakukan dengan objek sebelumnya.

Cukup psikedelik! Mari tambahkan ledakan lain untuk mengikutinya.

Pentagon menari

Kita bisa menggunakan sesuatu yang hampir identik dengan segitiga objek untuk membuat ledakan yang mengikutinya. Kode yang sedikit dimodifikasi ini menghasilkan heksagon berputar yang tumpang tindih berwarna cerah:

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 adalah kami telah menambahkan menunda dari 500ms, sehingga ledakan tidak akan dimulai sampai setelah segitiga. Dengan mengubah beberapa nilai, idenya di sini adalah untuk membuat ledakan berputar ke arah yang berlawanan dengan segitiga. Secara kebetulan, pada saat pentagon muncul, efek stroboskopik dari segitiga membuatnya tampak seperti berputar bersama.

Sedikit Keacakan

Mari tambahkan efek yang memanfaatkan nilai acak. Buat ledakan dengan properti 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)',  
 }  
});

Semburan ini akan membuat garis yang mulai merah dan memudar menjadi transparansi, menyusut seiring waktu. Apa yang membuat komponen ini menarik adalah bahwa nilai acak digunakan untuk menentukan beberapa propertinya.

NS pergeseran derajat memberikan objek anak sudut awal. Dengan mengacak ini, ini memberikan ledakan yang sama sekali berbeda pada setiap klik. Nilai acak juga digunakan untuk radius dan menunda berfungsi untuk menambah efek chaos.

Berikut adalah efeknya sendiri:

Karena kita menggunakan nilai acak di sini, kita perlu menambahkan metode tambahan ke event handler kita untuk objek:

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

NS menghasilkan() fungsi menghitung nilai acak baru setiap kali acara dipanggil. Tanpa ini, bentuk akan memilih nilai acak saat pertama kali dipanggil, dan terus menggunakan nilai tersebut untuk setiap panggilan berikutnya. Ini benar-benar akan merusak efeknya, jadi pastikan Anda menambahkan ini!

Anda dapat menggunakan nilai acak untuk hampir setiap elemen objek mo.js, dan itu adalah cara sederhana untuk membuat animasi unik.

cara mengubah png ke pdf di windows 10

Keacakan bukan satu-satunya cara untuk menambahkan gerakan dinamis ke animasi. Mari kita lihat sempoyongan fungsi.

Garis mengejutkan

Untuk menunjukkan bagaimana sempoyongan fungsi bekerja, kita akan membuat sesuatu yang sedikit seperti Roda Catherine. 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  
 }  
});

Semuanya di sini sudah akrab sekarang, ledakan menciptakan 50 anak yang merupakan garis merah atau oranye. Bedanya di sini kita melewati menunda properti terhuyung-huyung (10) fungsi. Ini menambahkan 10 ms penundaan antara emisi setiap anak, memberikan efek berputar yang kita cari.

Fungsi stagger tidak menggunakan nilai acak apa pun, jadi Anda tidak perlu a menghasilkan fungsi di event handler kali ini. Mari kita lihat semua yang kita miliki sejauh ini dalam tindakan:

Kita bisa dengan mudah berhenti di sini, tapi mari kita tambahkan satu ledakan lagi untuk menyelesaikan proyek ini.

Kotak Cerdas

Untuk ledakan terakhir ini, mari kita membuat sesuatu menggunakan persegi panjang. Tambahkan objek ini ke kode 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 menambahkan sesuatu yang baru pada apa yang telah kita kerjakan hari ini, itu dimasukkan hanya untuk menunjukkan bagaimana pola geometris yang kompleks dapat dengan mudah dibuat melalui kode.

Ini bukan hasil yang diinginkan dari objek ini ketika dibuat dalam tahap pengujian penulisan tutorial ini. Setelah kode berjalan, menjadi jelas bahwa saya telah menemukan sesuatu yang jauh lebih indah daripada yang bisa saya buat dengan sengaja!

Dengan objek terakhir ini ditambahkan, kita selesai. Mari kita lihat semuanya dalam aksi.

Mo.js: Alat yang Kuat untuk Animasi Web

Pengantar sederhana untuk mo.js ini mencakup alat dasar yang diperlukan untuk membuat animasi yang indah. Cara alat tersebut digunakan dapat membuat hampir semua hal, dan untuk banyak tugas, perpustakaan web merupakan alternatif sederhana untuk menggunakan Photoshop , After Effects , atau perangkat lunak mahal lainnya.

Pustaka ini berguna bagi mereka yang bekerja di pemrograman dan pengembangan web, penanganan acara yang digunakan dalam proyek dapat dengan mudah digunakan untuk membuat tombol dan teks reaktif di situs web atau di aplikasi. Bersenang-senanglah dengannya: tidak ada kesalahan, hanya kecelakaan yang menyenangkan!

Membagikan Membagikan Menciak Surel Apakah Layak Mengupgrade ke Windows 11?

Windows telah didesain ulang. Tetapi apakah itu cukup untuk meyakinkan Anda untuk beralih dari Windows 10 ke Windows 11?

Baca Selanjutnya Topik-topik yang berkaitan

Pemrograman
JavaScript

Tentang Penulis Ian Buckley(216 Artikel Diterbitkan)

Ian Buckley adalah jurnalis lepas, musisi, pemain, dan produser video yang tinggal di Berlin, Jerman. Ketika dia tidak menulis atau di atas panggung, dia bermain-main dengan elektronik atau kode DIY dengan harapan menjadi ilmuwan gila.

Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

Klik di sini untuk berlangganan