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

Pengantar Popmotion: Pointer dan Fisika

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Dian Sapta Priambogo (you can also view the original English article)

Selamat datang kembali ke pengantar seri tutorial Popmotion. Di bagian 1, kita menemukan cara menggunakan tweens dan keyframe untuk membuat animasi presisi yang dijadwalkan.

Di Bagian 2, kita akan melihat pelacakan pointer dan animasi berbasis kecepatan.

Pointer tracking memungkinkan kita membuat rak produk yang dapat digulir, slider dengan nilai khusus, atau antarmuka drag-and-drop.

Animasi berbasis velocity berbeda dengan animasi berbasis waktu seperti tween di bahwa properti utama yang mempengaruhi bagaimana animasi berperilaku adalah velocity. Animasi itu sendiri mungkin memerlukan banyak waktu.

Kita akan melihat tiga animasi berbasis kecepatan dalam Popmotion, spring, decay, dan physics. Kita akan menggunakan velocity animasi pelacakan pointer untuk memulai animasi ini, dan itu akan menunjukkan bagaimana animasi berbasis kecepatan dapat membuat UI yang menarik dan menyenangkan dengan cara yang tidak bisa dilakukan oleh animasi berbasis waktu.

Pertama, buka CodePen ini untuk dimainkan.

Pelacakan Pointer

Popmotion menyediakan fungsi pointer untuk melacak dan meng-output koordinat mouse atau pointer sentuh tunggal.

Mari kita impor ini bersama dengan styler, yang akan memungkinkan kita untuk mengatur posisi bola.

Untuk contoh ini, kita ingin menyeret bola. Mari kita tambahkan event yang akan menampilkan posisi pointer ke bola:

Kita juga ingin beberapa kode menghentikan pelacakan ketika kita melepaskan bola:

Jika Anda mencoba dan menyeret bolanya sekarang, ada masalah yang jelas. Bola melompat ketika kita menyentuhnya! Bukan pengalaman pengguna yang hebat.

Ini karena, secara default, pointer menampilkan posisi pointer relatif terhadap halaman.

Untuk menampilkan posisi pointer relatif ke titik lain, dalam hal ini transformasi bola x/y, kita bisa dengan mudah melewati posisi itu ke pointer seperti ini:

Sekarang Anda telah membuat bolanya, dalam beberapa baris kode, dapat ditarik! Namun, saat pengguna melepaskan bola, bola itu berhenti mati.

Ini tidak memuaskan: Bayangkan korsel produk yang dapat di-scroll yang dapat diseret pengguna untuk di-scroll. Jika itu berhenti mati dan bukannya momentum bergulir, itu akan kurang menyenangkan untuk digunakan.

Akan lebih sulit juga, karena upaya fisik keseluruhan yang diperlukan untuk men-scroll korsel akan lebih tinggi.

Untuk mengaktifkan animasi seperti ini, pertama-tama kita perlu mengetahui velocity objek yang dilemparkan.

Lacak Kecepatan

Popmotion menyediakan fungsi yang dapat membantu kita melacak kecepatan. Ini disebut value. Mari kita impor itu:

Untuk berbicara secara teknis sejenak, semua animasi Popmotion dikenal sebagai action. Aksi adalah aliran nilai yang reaktif yang dapat dimulai dan dihentikan.

value, sebaliknya, sebuah reaction. Itu tidak bisa dihentikan atau dimulai. Itu hanya merespon secara pasif ketika metode update -nya dipanggil. Ini dapat melacak nilai dan dapat digunakan untuk menanyakan kecepatannya.

Jadi, setelah kita mendefinisikan ballStyler, mari kita tentukan value baru untuk ballXY:

Setiap kali ballXY di-update, kita ingin memperbarui ballStyler. Kita bisa meneruskan argumen kedua ke value, sebuah fungsi yang akan berjalan setiap kali ballXY di-update:

Sekarang kita dapat menulis ulang pointer kita untuk memperbarui ballXY bukan ballStyler.set:

Sekarang, pada sembarang pointer, kita dapat memanggil ballXY.getVelocity() dan kita akan menerima kecepatan x dan y, siap untuk dihubungkan ke animasi berbasis kecepatan kita.

Animasi Berbasis Kecepatan

spring

Animasi berbasis kecepatan pertama yang diperkenalkan adalah spring. Ini didasarkan pada persamaan yang sama yang mengatur CASpringAnimation Apple, animasi musim semi diantara semua yang iOS mainkan.

Import:

Sekarang, ubah stopTracking sehingga alih-alih menghentikan animasi pointerTracker, ia memulai animasi spring seperti ini:

Kita menyediakannya dengan posisi bola saat ini, kecepatannya, dan target, dan simulasi dijalankan. Itu berubah tergantung pada bagaimana pengguna telah melempar bola.

Yang paling keren tentang spring adalah ekspresif. Dengan menyesuaikan properti mass, stiffness dan damping, Anda bisa mendapatkan spring yang sangat berbeda.

Misalnya, jika Anda hanya mengubah stiffness di atas menjadi 1000, Anda dapat membuat gerakan yang terasa seperti gertakan energi tinggi. Kemudian, dengan mengubah massmenjadi 20, Anda membuat gerakan yang terlihat hampir seperti gravitasi.

Ada kombinasi yang akan terasa benar dan memuaskan bagi pengguna Anda, dan sesuai dengan merek Anda, dalam situasi apa pun. Dengan bermain dengan perasaan spring yang berbeda, Anda dapat mengomunikasikan perasaan yang berbeda, seperti snap out-of-bounds yang ketat atau bouncing yang lebih lembut.

decay

Animasi decay, seperti namanya, meluruh kecepatan yang disediakan sehingga animasi secara bertahap melambat untuk berhenti sama sekali.

Ini dapat digunakan untuk membuat efek pengguliran momentum yang ditemukan pada ponsel cerdas, seperti ini:

Impor fungsi decay:

Dan ganti fungsi stopTracking dengan yang berikut:

decay secara otomatis menghitung target baru berdasarkan yang disediakan from dan velocity props.

Dimungkinkan untuk menyesuaikan perasaan deselerasi dengan mengacaukan alat peraga yang diuraikan dalam dokumen yang dihubungkan di atas, tetapi, tidak seperti spring dan physics, decay dirancang untuk bekerja out of the box.

physics

Akhirnya, kita punya animasi physics. Ini adalah pisau animasi berbasis kecepatan dari Popmotion dari Swiss Army. Dengan itu, Anda dapat mensimulasikan:

  • constant velocity
  • acceleration
  • springs
  • friction

spring dan decay menawarkan gerakan super-presisi dan beragam "rasa". Segera, mereka berdua juga bisa di-scrubbable.

Namun keduanya tidak berubah. Setelah Anda mulai, propertinya diatur dalam batu. Sempurna ketika kita ingin memulai animasi berdasarkan keadaan from/velocity awal, tetapi tidak begitu baik jika kita ingin interaksi yang berkelanjutan.

physics, sebaliknya, adalah simulasi terintegrasi yang lebih dekat dengan permainan video. Ini bekerja dengan, sekali per frame, mengambil status saat ini dan kemudian mengubahnya berdasarkan pada properti saat ini pada titik waktu tersebut.

Ini memungkinkannya untuk bisa berubah, yang berarti kita dapat mengubah properti itu, yang kemudian mengubah hasil simulasi.

Untuk mendemonstrasikan ini, mari kita lakukan twist pada smoothing pointer klasik, dengan smoothing elastis.

Impor physics:

Kali ini, kita akan mengubah fungsi startTracking. Alih-alih mengganti ballXY dengan pointer, kita akan menggunakan physics:

Di sini, kita mengatur from dan velocity seperti biasa. friction dan springStrength keduanya menyesuaikan properti spring.

restSpeed: false override perilaku default dari animasi yang berhenti ketika gerakan berhenti. Kita ingin menghentikannya secara manual di stopTracking.

Animasi ini tidak akan melakukan apa-apa karena kita mengatur to, target spring, untuk sama seperti from. Jadi mari kita terapkan kembali pelacakan pointer kali ini untuk mengubah target physics. Pada baris terakhir startTracking, tambahkan:

Di sini, kita menggunakan animasi pointer yang sama seperti sebelumnya. Kecuali saat ini, kita menggunakannya untuk mengubah target animasi lain. Dengan demikian, kita membuat pelacakan pointer elastis ini:

Kesimpulan

Animasi berbasis kecepatan yang dipasangkan dengan pelacakan pointer dapat membuat antarmuka yang menarik dan menyenangkan.

spring dapat digunakan untuk membuat berbagai macam feel spring, sedangkan decay khusus dirancang untuk animasi momentum gulir. physics lebih terbatas daripada dalam hal konfigurasiabilitas, tetapi juga memberikan kesempatan untuk mengubah simulasi yang sedang berlangsung, membuka kemungkinan interaksi baru.

Di bagian selanjutnya dan terakhir dari seri pengantar tentang Popmotion ini, kita akan mengambil semua yang telah kita pelajari di dua bagian pertama dan menggunakannya bersama dengan beberapa komposisi fungsional ringan untuk membuat animasi yang dapat digarap, bersama dengan scrubber untuk menggarapnya!

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.