Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. JavaScript
Code

Bermula dengan perpustakaan animasi Mojs: modul pecah

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Getting Started with Mojs Animation Library.
Getting Started With the Mojs Animation Library: The ShapeSwirl and Stagger Modules

Malay (Melayu) translation by Hamdan Veerlax (you can also view the original English article)

Kami memulakan siri ini dengan mempelajari bagaimana untuk animasikan elemen HTML menggunakan mojs. Dalam tutorial kedua, kami telah berpindah ke animasi terbina dalam bentuk SVG yang menggunakan bentuk modul. Tutorial ketiga meliputi lebih banyak cara untuk animating bentuk SVG yang menggunakan modul-modul yang ShapeSwirl dan tak serentak.

Sekarang, kita akan mempelajari bagaimana animasi bentuk SVG berbeza dalam pembentukan pecah yang menggunakan modul Burst. Tutorial ini akan bergantung kepada konsep-konsep yang kami dilindungi dalam tutorial tiga yang sebelumnya. Jika anda tidak sudah membacanya, saya ingin mencadangkan bahawa anda pergi melalui mereka terlebih dahulu.

Membuat animasi asas pecah

Perkara pertama yang perlu kita lakukan sebelum kita boleh membuat sebarang animasi pecah adalah instantiate objek Burst. Selepas itu, kita hanya boleh menentukan nilai-nilai sifat yang berbeza untuk mengawal bagaimana animasi memainkan. Nama-nama banyak sifat-sifat dalam modul Burst adalah sama seperti sifat-sifat dalam bentuk modul. Walau bagaimanapun, sifat ini yang menjalankan tugas sangat berbeza dalam kes ini.

Sifat-sifat kiri dan kanan menentukan kedudukan awal pecah daripada zarah-zarah di dalamnya. Begitu juga, x dan sifat-sifat y menentukan peralihan keseluruhan pecah dan bukannya zarah individu.

Jejari bulatan ini dibentuk oleh zarah-zarah pecah dikawal oleh pihak hotel radius. Ini adalah sangat berbeza daripada harta radius bentuk individu, yang menentukan saiz bentuk tersebut. Dalam kes yang pecah, jejari menentukan berapa banyak lagi selain bentuk individu di dalamnya akan menjadi.

Bilangan bentuk atau zarah yang pecah satu boleh ditentukan dengan menggunakan kiraan harta. Secara lalai, terdapat lima zarah dalam setiap pecahan yang anda cipta. Zarah-zarah ini sama dijarakkan sepanjang bahagian duit pecah. Sebagai contoh, sekiranya terdapat zarah yang empat, mereka akan ditempatkan pada 90 darjah antara satu sama lain. Jika terdapat tiga zarah, mereka akan ditempatkan pada 120 darjah.

Jika anda tidak mahu pecah zarah meliputi kawasan keseluruhan 360 darjah, anda boleh menentukan bahagian yang patut dilindungi menggunakan harta ijasah. Apa-apa nilai di atas 0 adalah sah selama ini. Bilangan tertentu daripada darjah akan diagihkan sama rata antara semua zarah. Jika nilai Ijazah 360, bentuk mungkin bertindih.

Sudut yang ditentukan menggunakan sifat sudut menentukan sudut seluruh pecah. Dalam kes ini, zarah individu tidak diputar di sekitar pusat mereka sendiri tetapi di sekitar pusat pecahnya. Ini adalah serupa dengan bagaimana bumi berputar mengelilingi matahari, yang berbeza daripada putaran bumi pada paksinya sendiri.

Harta skala skala nilai semua sifat-sifat fizikal pecah dan bentuk yang mengakibatkan individu. Sama seperti sifat-sifat pecah yang lain, semua bentuk di dalamnya akan terskala sekaligus. Menetapkan skala pecah kepada 3 akan meningkatkan jejari keseluruhan pecah serta saiz bentuk individu oleh 3.

Dalam cebisan kod berikut, kami mewujudkan lima pecah berbeza menggunakan sifat-sifat yang kita bahas.

Anda boleh melihat bahawa burstA dan burstE hanya berbeza dalam bilangan darjah yang mereka perlu untuk menampung. Kerana zarah-zarah di burstA perlu meliputi 360 darjah (nilai lalai), mereka ditempatkan 360/20 = 18 darjah apart. Sebaliknya, zarah-zarah dalam burstE diletakkan 3600/20 = 180 darjah apart. Bermula dari sifar, zarah itu pertama diletakkan pada 0 darjah, dan seterusnya diletakkan pada 180 darjah.

Zarah itu ketiga akan diletakkan pada 360 darjah, yang pada dasarnya sama dengan 0 darjah. Zarah itu keempat akan diletakkan pada darjah 540, tapi itulah yang pada dasarnya sama dengan 180 darjah. Dalam erti kata lain, semua zarah bernombor ganjil diletakkan pada 0 darjah, dan semua zarah bilangan walaupun diletakkan pada 180 darjah. Pada akhirnya, anda hanya melihat dua zarah kerana semua yang lain bertindih dengan dua yang pertama.

Ia adalah penting untuk ingat bahawa anda tidak boleh langsung mengawal fungsi tempoh, kelewatan atau meredakan animasi pecah. Modul ini akan menentukan semua nilai ini secara automatik berdasarkan nilai-nilai berbeza kanak-kanak yang menjadi animasi.

Memanipulasi individu pecah zarah

Setakat ini dalam tutorial ini, semua zarah dalam pecah mempunyai animasi yang sama diterapkan kepada mereka. Sudut, skala, jejari, dan kedudukan mereka semuanya berubah dengan nilai yang sama. Selain itu, kami tidak dapat mengawal tempoh dan kelewatan sama ada zarah individu atau pecah secara keseluruhan. Modul Burst mojs tidak mempunyai satu set sifat yang boleh mengubah semua nilai ini secara langsung. Walau bagaimanapun, kita boleh menentukan nilai animasi untuk zarah individu, yang seterusnya mempengaruhi animasi pecah.

Semua zarah dalam animasi pecah dianggap sebagai kanak-kanak objek Burst asal. Oleh itu, mojs membolehkan kita mengawal animasi zarah pecah individu menggunakan harta kanak-kanak, yang menerima objek sebagai nilainya. Anda boleh menggunakan semua sifat ShapeSwirl kecuali x dan y di dalam objek kanak-kanak. Ini masuk akal kerana zarah-zarah individu dalam animasi pecah harus muncul pada kedudukan tertentu, dan membolehkan kita secara rawak mengubah kedudukan zarah-zarah individu akan mengubah konfigurasi.

Mana-mana nilai harta kanak-kanak yang anda tidak nyatakan akan ditetapkan kepada lalai yang disediakan oleh modul ShapeSwirl. Dalam contoh berikut, kita menghidupkan 20 garisan animasi yang berbeza. Kali ini, sifat sudut telah ditetapkan pada zarah individu dan bukannya objek Burst supaya hanya garisan berputar di sekitar pusat mereka dan bukannya keseluruhan objek. Sebagaimana yang kita pelajari dalam tutorial sebelumnya, semua objek ShapeSwirl menurun dari 1 hingga 0 secara lalai. Itulah sebabnya panjang garis berubah dari 40 hingga 0 dalam animasi.

Seperti yang saya nyatakan sebelum ini, kita dapat menghidupkan semua sifat ShapeSwirl dalam animasi pecah. Setiap kanak-kanak dalam animasi boleh mempunyai set ciri sendiri. Jika hanya satu nilai yang disediakan, ia akan digunakan pada semua zarah kanak-kanak. Jika nilai diberikan sebagai tatasusunan, ia akan digunakan secara berurutan, satu zarah pada satu masa.

Berikut adalah kod JavaScript untuk membuat lima animasi pecah berbeza menggunakan semua konsep yang telah kami pelajari setakat ini.

Dalam animasi pecah pertama, sudut yang digunakan secara langsung pada objek Burst memutar seluruh kumpulan di sekitar pusat objek pecah. Walau bagaimanapun, sudut yang digunakan di dalam harta kanak-kanak akan memutarkan semua segi tiga di sekitar pusat mereka sendiri. Kami juga melambatkan animasi pecah dengan mengubah tempoh animasi untuk semua kanak-kanak ke 4000ms.

Dalam animasi pecah kedua, warna semua segitiga diambil dari array yang dihantar ke harta pengisi. Kami telah menentukan hanya tiga warna mengisi, tetapi jumlah segitiga adalah 20. Dalam kes sedemikian, mojs terus berbasikal melalui unsur array dan mengisi segitiga dengan tiga warna yang sama sekali lagi dan lagi.

Dalam animasi keempat, kami menggunakan rentetan rand, yang kami pelajari dalam tutorial sebelumnya, untuk secara rawak memilih nilai skala untuk semua zarah kanak-kanak. Kami juga menetapkan nilai harta isShowEnd kepada palsu untuk menyembunyikan zarah pada akhir animasi.

Dalam animasi kelima, kami menggunakan kaedah kemudian () dari modul Tutorial  untuk memainkan urutan animasi lain selepas selesai yang pertama.

Pemikiran Akhir

Tujuan siri ini adalah untuk mengenali asas-asas perpustakaan animasi mojs. Setiap tutorial memberi tumpuan kepada satu modul dan bagaimana anda boleh menggunakan sifat dalam modul itu untuk mencipta animasi asas.

Tutorial lepas ini menggunakan konsep dari tutorial sebelumnya untuk membuat animasi yang lebih rumit. Mojs adalah perpustakaan animasi yang sangat berkuasa, dan hasil akhir yang anda dapat bergantung pada bagaimana kreatif anda boleh mendapatkan dengan semua sifat, jadi terus bereksperimen.

Jika ada apa-apa yang anda ingin saya jelaskan dalam tutorial ini, sila beritahu saya dalam komen.

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.