Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Pengenalan kepada Popmotion: Petunjuk dan Fizik

by
Difficulty:IntermediateLength:ShortLanguages:

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

Selamat datang kembali ke siri tutorial Pengenalan kepada Popmotion. Dalam bahagian 1, kami dapat mengetahui bagaimana menggunakan tweens dan keyframes untuk membuat animasi yang tepat dan tepat waktu.

Dalam Bahagian 2, kami akan melihat pengesanan penunjuk dan animasi berasaskan halaju.

Penjejakan penunjuk membolehkan kami untuk membuat rak produk boleh ditatal, slider nilai tersuai, atau antara muka drag dan drop.

Animasi berasaskan halaju adalah berbeza dengan animasi berasaskan masa seperti tween di mana harta utama yang mempengaruhi bagaimana animasi berkelakuan adalah halaju. Animasi itu sendiri mungkin mengambil masa yang lama.

Kami akan melihat tiga animasi berasaskan halaju dalam Popmotion, musim bunga, pereputan, dan fizik. Kami akan menggunakan halaju animasi pengesan penunjuk untuk memulakan animasi ini, dan itu akan menunjukkan bagaimana animasi berasaskan halaju boleh membuat UI yang menarik dan suka bermain dengan cara yang animasi berasaskan masa tidak dapat.

Pertama, buka CodePen ini untuk bermain bersama.

Penjejakan Pointer

Popmotion menyediakan fungsi penunjuk untuk mengesan dan mengeluarkan koordinat sama ada tetikus atau penunjuk sentuhan tunggal.

Mari kita import ini bersama styler, yang akan membolehkan kita menetapkan kedudukan bola.

Untuk contoh ini, kami ingin menyeret bola. Mari tambahkan peristiwa yang akan mengeluarkan kedudukan penunjuk ke bola:

Kami juga mahu beberapa kod untuk berhenti menjejak apabila kami melepaskan bola:

Jika anda mencuba dan menyeret bola sekarang, ada masalah yang jelas. Bola melompat apabila kita menyentuhnya! Bukan pengalaman pengguna yang hebat.

Ini kerana, secara lalai, penunjuk menghasilkan kedudukan penunjuk berbanding dengan halaman.

Untuk mengeluarkan kedudukan penunjuk relatif kepada titik lain, dalam kes ini, mengubah x / y bola, kita hanya boleh lulus kedudukan itu kepada penunjuk seperti ini:

Sekarang anda telah membuat bola, dalam beberapa baris kod, seret! Walau bagaimanapun, apabila pengguna melepaskan bola, ia berhenti mati.

Ini tidak memuaskan: Bayangkan carousel produk yang boleh digulir yang pengguna boleh seret untuk menatal. Jika ia hanya berhenti mati dan bukannya menatal momentum, ia akan menjadi kurang menyenangkan untuk digunakan.

Ia akan menjadi lebih sukar, kerana usaha fizikal yang diperlukan untuk menatal karusel akan lebih tinggi.

Untuk membolehkan animasi seperti ini, kita perlu mengetahui halaju objek yang dilemparkan.

Trek Velocity

Popmotion menyediakan fungsi yang dapat membantu kita mengesan halaju. Ia dipanggil nilai. Mari kita import bahawa:

Untuk bertutur secara teknis buat seketika, semua animasi Popmotion dikenali sebagai tindakan. Tindakan adalah aliran nilai reaktif yang boleh dimulakan dan dihentikan.

Nilai adalah, sebaliknya, reaksi. Ia tidak boleh dihentikan atau dimulakan. Ia hanya memberi respon secara pasif apabila kaedah kemas kini dipanggil. Ia boleh menjejaki nilai-nilai dan boleh digunakan untuk menanyakan halaju mereka.

Jadi, selepas kita mentakrifkan ballStyler, mari kita tentukan nilai baru untuk ballXY:

Setiap kali update bolaXY, kami ingin mengemas kini ballStyler. Kita boleh lulus argumen kedua untuk nilai, fungsi yang akan dijalankan setiap kali update ballXY:

Sekarang kita boleh menulis semula penunjuk kami untuk mengemas kini ballXY bukannya ballStyler.set:

Sekarang, pada mana-mana penunjuk, kita boleh memanggil ballXY.getVelocity () dan kami akan menerima halaju kedua-dua x dan y, bersedia untuk memasukkan ke dalam animasi berasaskan halaju kami.

Animasi berasaskan kelajuan

spring

Animasi berasaskan halaju pertama yang diperkenalkan adalah musim bunga. Ia didasarkan pada persamaan yang sama yang mengawal CASpringAnimation Apple, animasi musim bunga di belakang semua permainan IOS yang bermalas-malas.

Import:

Kini, pindahkan stopTracking supaya bukan menghentikan animasi pointerTracker, ia memulakan animasi musim bunga seperti ini:

Kami menyediakannya dengan kedudukan semasa bola, halaju, dan sasaran, dan simulasi dijalankan. Ia berubah bergantung kepada bagaimana pengguna telah melemparkan bola.

Perkara yang sejuk tentang mata air adalah mereka yang ekspresif. Dengan melaraskan sifat jisim, kekakuan dan redaman, anda boleh berakhir dengan rasanya spring-radikal yang berbeza.

Sebagai contoh, jika anda hanya mengubah kekakuan di atas hingga 1000, anda boleh mencipta gerakan yang merasakan sentuhan tenaga tinggi. Kemudian, dengan menukar jisim menjadi 20, anda membuat gerakan yang kelihatan hampir seperti graviti.

Terdapat satu kombinasi yang akan merasa benar dan memuaskan untuk pengguna anda, dan sesuai dengan jenama anda, di bawah hampir apa-apa keadaan. Dengan bermain dengan rutin musim bunga yang berlainan, anda boleh menyampaikan perasaan yang berbeza, seperti snap luar yang ketat atau lantunan afirmatif yang lebih lembut.

decay

Animasi peluruhan, seperti namanya, mereput halaju yang disediakan supaya animasi secara beransur-ansur melambatkan berhenti sepenuhnya.

Ini boleh digunakan untuk mencipta kesan menatal momentum yang terdapat pada telefon pintar, seperti ini:

Import fungsi pembusukan:

Dan gantikan fungsi stopTracking dengan yang berikut:

Keruntuhan secara automatik mengira sasaran baru berdasarkan peruntukan halaju dan halaju.

Adalah mungkin untuk menyesuaikan rasa putus-putus dengan mengaitkan dengan prop yang digariskan dalam dokumen yang dikaitkan di atas tetapi, tidak seperti musim semi dan fizik, pereputan direka untuk keluar dari kotak.

fizik

Akhirnya, kita mempunyai animasi fizik. Ini adalah pisau Tentera Swiss Popmotion mengenai animasi berasaskan halaju. Dengan itu, anda boleh mensimulasikan:

  • halaju berterusan
  • acceleration
  • springs
  • friction

spring dan decay menawarkan pergerakan super tepat dan pelbagai 'merasa'. Tidak lama lagi, kedua-duanya juga boleh dibersihkan.

Tetapi keduanya tidak berubah. Sebaik sahaja anda bermula sama ada, sifat mereka ditetapkan dalam batu. Sempurna untuk apabila kita mahu memulakan animasi berdasarkan keadaan awal / halaju, tetapi tidak begitu baik jika kita mahu interaksi yang berterusan.

fizik, sebaliknya, adalah simulasi bersepadu lebih dekat dengan permainan video. Ia berfungsi oleh, sekali setiap bingkai, mengambil keadaan semasa dan kemudian mengubahnya berdasarkan sifat semasa pada ketika itu.

Ini membolehkan ia boleh berubah, yang bermakna kita boleh mengubah sifat-sifat tersebut, yang kemudian mengubah hasil simulasi.

Untuk menunjukkan ini, mari membuat sentuhan pada pelurus penunjuk klasik, dengan meluruskan elastik.

Fizik import:

Kali ini, kita akan menukar fungsi startTracking. Daripada mengubah bolaXY dengan penuding, kita akan menggunakan fizik:

Di sini, kami menetapkan dari dan halaju seperti biasa. geseran dan springStrength kedua-dua menyesuaikan sifat-sifat musim bunga.

restSpeed: palsu menimpa kelakuan lalai animasi yang berhenti apabila gerakan berhenti. Kami mahu menghentikannya secara manual di stopTracking.

Secara sendiri, animasi ini tidak akan melakukan apa-apa kerana kami menetapkan, sasaran musim bunga, sama seperti dari. Oleh itu mari kita buat semula penunjuk penunjuk kali ini untuk mengubah sasaran fizik musim semi. Pada baris terakhir startTracking, tambahkan:

Di sini, kami menggunakan animasi penunjuk yang serupa seperti sebelumnya. Kecuali kali ini, kami menggunakannya untuk menukar sasaran animasi lain. Dengan berbuat demikian, kami membuat penjejakan penunjuk anjakan:

Kesimpulannya

Animasi berdasarkan kelajuan yang dipasangkan dengan penjejakan penunjuk boleh membuat antara muka yang menarik dan suka bermain.

spring boleh digunakan untuk mencipta pelbagai rawak musim bunga, manakala kerosakan secara khusus disesuaikan untuk animasi tatal momentum. fizik adalah lebih terhad daripada sama ada dari segi konfigurasi, tetapi juga memberi peluang untuk mengubah simulasi yang sedang berjalan, membuka kemungkinan interaksi baru.

Dalam bahagian seterusnya dan akhir dari siri pengenalan ini pada Popmotion, kita akan mengambil semua yang kita pelajari dalam dua bahagian pertama dan menggunakannya bersama dengan beberapa komposisi fungsional yang ringan untuk membuat animasi scrubbable, bersama-sama dengan penjemak untuk dilakukan menggosok dengan!

Advertisement
Advertisement
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.