Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Code
  2. JavaScript

Memulai dengan perpustakaan animasi Mojs: ShapeSwirl dan Stagger modul

by
Read Time:7 minsLanguages:
This post is part of a series called Getting Started with Mojs Animation Library.
Getting Started With the Mojs Animation Library: The Shape Module
Getting Started With the Mojs Animation Library: The Burst Module

Indonesian (Bahasa Indonesia) translation by Saipul Hidayat (you can also view the original English article)

Tutorial pertama dan kedua dari seri ini mencakup cara menganimasikan berbagai elemen HTML dan bentuk SVG menggunakan mojs. Dalam tutorial ini, kita akan belajar tentang dua modul lagi yang dapat membuat animasi kita lebih menarik. Modul ShapeSwirl memungkinkan Anda untuk menambahkan gerakan berputar-putar ke bentuk apapun yang Anda buat. Modul stagger, di sisi lain, memungkinkan Anda untuk membuat dan menghidupkan beberapa bentuk sekaligus.

Menggunakan modul ShapeSwirl

Modul ShapeSwirl di mojs memiliki konstruktor yang menerima semua sifat-sifat bentuk modul. Ini juga menerima beberapa properti tambahan yang memungkinkan untuk menciptakan gerakan berputar-putar.

Anda dapat menentukan amplitudo atau ukuran yang melingkar yang menggunakan properti swirlSize. Frekuensi osilasi selama gerakan berputar-putar ditentukan oleh nilai properti swirlFrequency. Anda juga dapat mengurangi total panjang jalur dari bentuk berputar-putar menggunakan properti pathScale. Nilai yang valid untuk rentang properti ini antara 0 dan 1. Arah gerakan dapat ditentukan menggunakan properti arah. Perlu diingat bahwa arah hanya memiliki dua nilai yang valid: -1 dan 1. Bentuk dalam gerakan berputar-putar akan mengikuti jalan sinusoidal secara default. Namun, Anda dapat menghidupkan mereka sepanjang garis-garis lurus dengan menyetel nilai properti isSwirl ke false.

Selain properti tambahan ini, modul ShapeSwirl juga mengubah nilai default dari beberapa properti dari modul Shape. Jari-jari setiap bentuk berputar-putar diatur ke 5 secara default. Demikian pula, skala properti diatur untuk animasi dari 1 ke 0 dalam modul ShapeSwirl.

Dalam potongan kode berikut, saya telah menggunakan semua properti-properti ini untuk menghidupkan dua lingkaran dalam gerakan berputar-putar.

Dalam demo berikut, Anda dapat klik pada tombol putar untuk menghidupkan dua lingkaran, segitiga dan salib dalam gerakan berputar-putar.

Menggunakan modul Stagger

Tidak seperti semua modul lain yang telah kita bahas sejauh, stagger bukanlah konstruktor. Modul ini adalah benar-benar fungsi yang dapat dibungkus di sekitar setiap modul lain untuk menghidupkan beberapa bentuk atau elemen sekaligus. Hal ini dapat sangat berguna ketika Anda ingin menerapkan urutan animasi yang sama pada bentuk yang berbeda tapi masih mengubah besarnya mereka secara mandiri.

Setelah Anda telah terbungkus modul bentuk di dalam fungsi stagger(), Anda akan dapat menentukan jumlah elemen untuk menghidupkan menggunakan properti quantifier. Setelah itu, Anda dapat menentukan nilai dari semua bentuk lain terkait properti. Itu sekarang akan menjadi mungkin untuk masing-masing properti untuk menerima array nilai untuk diterapkan pada bentuk masing secara berurutan. Jika Anda ingin semua bentuk memiliki nilai yang sama untuk properti tertentu, Anda hanya dapat mengatur properti untuk menjadi sama dengan nilai array nilai yang tertentu.

Contoh berikut harus menjelaskan bagaimana nilai-nilai yang ditugaskan untuk berbagai bentuk:

Kita mulai dengan pembungkus modul bentuk di dalam fungsi stagger(). Hal ini memungkinkan kita untuk membuat beberapa bentuk sekaligus. Kami telah menetapkan nilai properti quantifier ke 5. Hal ini menciptakan lima bentuk yang berbeda, yang dalam kasus kami poligon. Setiap poligon adalah sebuah segitiga karena nilai default properti poin adalah 3. Kita sudah dibahas semua sifat-sifat ini dalam tutorial kedua dari seri.

Ada hanya satu nilai fill, stroke, dan strokeWidth. Ini berarti bahwa semua segitiga akan diisi dengan kuning dan akan memiliki stroke hitam. Lebar stroke dalam setiap kasus akan 5px. Nilai properti radius, di sisi lain, adalah sebuah array lima bilangan bulat. Setiap bulat menentukan radius satu segitiga dalam kelompok. Nilai 20 ditugaskan ke segitiga pertama, dan nilai 60 ditetapkan terakhir segitiga.

Semua properti mempunyai nilai awal dan akhir yang sama untuk masing-masing segitiga sejauh. Ini berarti bahwa tak satu pun dari properti itu akan beranimasi. Namun, nilai properti x adalah sebuah array object yang mengandung nilai awal dan akhir posisi horizontal setiap segitiga. Pertama segitiga akan menerjemahkan dari x: 0 x: 100, dan segitiga terakhir akan menerjemahkan dari x: 0 x: 300. Durasi animasi dalam setiap kasus akan 2000 milidetik.

Jika ada langkah tetap antara nilai-nilai yang berbeda dari sebuah properti, Anda juga dapat menggunakan stagger string untuk menentukan nilai awal dan kelipatannya. String Stagger menerima dua parameter. Yang pertama adalah nilai awal, yang ditugaskan untuk elemen pertama dalam kelompok. Nilai kedua adalah langkah, yang menentukan kenaikan atau penurunan nilai untuk setiap bentuk berturut-turut. Ketika hanya satu nilai dilewatkan ke stagger string, itu dianggap menjadi langkah, dan nilai awal dalam kasus ini dianggap menjadi nol.

Contoh segitiga di atas dapat ditulis ulang seperti:

Anda juga dapat menetapkan nilai-nilai yang acak ke bentuk yang berbeda dalam sebuah kelompok yang menggunakan string rand. Anda hanya perlu menyediakan nilai minimum dan maksimum untuk rand string, dan mojs akan secara otomatis menetapkan nilai antara batas-batas ini bentuk individu dalam kelompok.

Dalam contoh berikut, kita menggunakan senar rand secara acak menetapkan jumlah poin untuk setiap poligon. Anda mungkin telah memperhatikan bahwa jumlah poligon kami render 25, tapi array mengisi hanya memiliki empat warna. Ketika panjang array lebih kecil daripada nilai quantifier, nilai untuk berbagai bentuk yang ditentukan oleh terus-menerus Bersepeda melalui array sampai semua bentuk ditugaskan nilai. Sebagai contoh, setelah menetapkan warna poligon empat, warna poligon kelima akan orange, warna poligon keenam akan kuning, dan sebagainya.

Stagger string set radius poligon pertama sebesar 10 dan kemudian terus meningkat radius poligon berikutnya oleh 1. Posisi horizontal setiap poligon sama meningkat sebesar 20, dan posisi vertikal ditentukan secara acak. Nilai akhir sudut untuk setiap poligon terletak secara acak antara -120 dan 120. Dengan cara ini, beberapa poligon berputar searah sementara orang lain memutar anti-searah. Animasi sudut juga diberikan sendiri meredakan fungsi, yang berbeda dari animasi umum properti lainnya.

Akhir pikiran

Kita membahas dua lebih mojs modul dalam tutorial ini. Modul ShapeSwirl memungkinkan kita untuk menghidupkan bentuk yang berbeda dalam gerakan berputar-putar. Modul stagger memungkinkan kita untuk menghidupkan unsur-unsur bentuk sekaligus.

Setiap bentuk dalam kelompok stagger dapat animasi secara mandiri tanpa gangguan dari bentuk lainnya. Hal ini membuat modul stagger sangat berguna. Kita juga belajar bagaimana menggunakan string stagger untuk menetapkan nilai-nilai dengan langkah-langkah yang tetap dengan sifat-sifat bentuk yang berbeda.

Jika Anda memiliki pertanyaan yang berkaitan dengan tutorial ini, tolong beritahu saya di komentar. Kita akan belajar tentang modul meledak di tutorial selanjutnya dari seri ini.

Sumber daya tambahan untuk belajar atau menggunakan dalam pekerjaan Anda, memeriksa apa yang kita miliki tersedia di pasar Envato.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.