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

Memperkenalkan Popmotion: Custom Animation Scrubber

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Kang Abbad (you can also view the original English article)

Di bagian pertama dari seri pengantar Popmotion, kita belajar bagaimana menggunakan animasi time-based seperti tween dan keyframes. Kita juga belajar bagaimana menggunakan animasi-pada DOM, menggunakan performant styler.

Di bagian kedua, kita belajar bagaimana menggunakan pelacakan pointer dan merekam velocity. Kemudian kami gunakan itu untuk memperkuat animasi velocity-based spring, decay, dan physics.

Di bagian akhir ini, kita akan menciptakan sebuah scrubber widget, dan kita akan menggunakannya untuk scrub animasi keyframes. Kita akan membuat widget itu sendiri dari kombinasi pelacakan pointer serta spring dan decay untuk memberikan nuansa yang lebih mendalam daripada run-of-the-mill scrubber.

Mencoba sendiri:

Persiapan

Markup

Pertama, fork Codepen ini  untuk template HTML. Seperti sebelumnya, karena ini adalah tutorial menengah, saya tidak akan menjelaskan semuanya.

Catatan utama adalah bahwa handle di scrubber terdiri dari dua elemen div: .handle dan .handle-hit-daerah.

.handle adalah putaran biru indikator visual dimana scrubber menanganinya. Kita sudah membungkusnya didalam area elemen yang tidak terlihat/tersentuh agar para pengguna layar sentuh mudah.

Fungsi Import

Di bagian atas panel JS kamu, impor segala sesuatu yang akan kita gunakan dalam tutorial ini:

Memilih Elemen

Kita akan membutuhkan tiga elemen dalam tutorial ini. Kita akan menganimasikan .box, seret dan animasikan .handle-hit-area, dan ukur .range.

Mari buat juga styler untuk elemen yang akan kita animasikan:

Animasi Keyframes

Untuk animasi scrubbable kita, kita akan membuat .box bergerak dari kiri ke kanan dengan keyframe. Namun, kita bisa dengan mudah scrub animasi tween atau timeline menggunakan metode yang sama yang diuraikan di bagian selanjutnya dalam tutorial ini.

Animasi kamu sekarang bisa diputar. Tapi kita tidak menginginkan itu! Mari kita jeda untuk sekarang:

Menyeret sumbu x

Saatnya untuk menggunakan pointer untuk menyeret scrubber handle kita. Dalam tutorial sebelumnya, kami menggunakan properti x dan y, tetapi dengan scrubber kita hanya perlu x.

Kita lebih suka menjaga kode kami agar dapat digunakan kembali, dan pelacakan sebuah sumbu tunggal pointer adalah beberapa kasus penggunaan umum. Jadi mari kita membuat sebuah fungsi baru yang disebut, imajinatif, pointerX.

Ia akan bekerja persis seperti pointer kecuali itu hanya akan mengambil satu angka sebagai argumen dan keluarannya hanya satu angka (x):

Di sini, kamu dapat melihat kita menggunakan metode pointer yang disebut pipe. pipe tersedia pada semua tindakan Popmotion yang telah kita lihat sejauh ini, termasuk keyframes.

pipe menerima beberapa fungsi. Ketika aksi start jalan, semua output akan dilewatkan melalui masing-masing fungsi ini pada gilirannya, sebelum fungsi update yang tersedia untuk  start lepas.

Dalam kasus ini, fungsi kita hanyalah:

Semua yang dilakukannya dengan mengambil objek {x, y} biasanya keluar menurut pointer dan hanya mengembalikan sumbu x.

Event Listeners

Kita perlu tahu jika pengguna telah mulai menekan handle sebelum kita mulai pelacakan dengan fungsi pointerX baru kita.

Di tutorial terakhir kita menggunakan fungsi addEventListener biasa. Saat ini, kita akan menggunakan fungsi Popmotion yang lain yang disebut listen. listen juga menyediakan metode pipe, serta akses ke semua metode aksi, tapi kita tidak akan menggunakannya di sini.

listen memungkinkan kita untuk menambahkan event listeners ke beberapa events dengan fungsi tunggal, mirip dengan jQuery. Jadi kita bisa meringkas empat event listeners sebelumnya menjadi dua:

Memindahkan Handle

Kita akan memerlukan handle's x velocity nantinya, jadi mari kita membuat value, seperti yang kita pelajari di tutorial terakhir memungkinkan kita untuk query velocity. Pada baris setelah kita mendefinisikan handleStyler, tambahkan:

Sekarang kita dapat menambahkan fungsi startDrag dan stopDrag kita:

Sekarang, handle dapat scrubbed diluar batasan slider , tapi kita akan kembali ke ini nanti.

Scrubbing

Sekarang kita memiliki sebuah visually functional scrubber, tetapi kita tidak sedang scrubbing animasi yang sebenarnya.

Setiap value memiliki metode subscribe. Ini memungkinkan kita untuk melampirkan beberapa subscribers untuk diaktifkan ketika value berubah. Kita ingin mencari animasi keyframes setiap kali handleX update.

Pertama, mengukur slider. Pada baris setelah kita menentukan range, tambahkan:

keyframes.seek menerima perkembangan nilai seperti yang dinyatakan dari 0 ke 1, sedangkan handleX kita diatur dengan nilai-nilai piksel dari 0 ke rangeWidth.

Kita dapat konversi dari pengukuran pixel dengan kisaran 0 sampai 1 dengan membagi pengukuran pixel saat ini dengan rangeWidth. Di baris setelah boxAnimation.pause(), tambahkan metode subscribers ini:

Sekarang, jika kamu bermain dengan scrubber, animasi scrub akan berhasil!

The Extra Mile

Spring Boundaries

Scrubber masih bisa ditarik ke luar batas kisaran penuh. Untuk memecahkan masalah ini, kita hanya bisa menggunakan fungsi clamp untuk memastikan kita tidak keluar dari 0, rangeWidth.

Sebagai gantinya, kita akan melangkah lebih jauh dan memasang spring ke ujung slider kita. Ketika pengguna menarik handle melampaui batas dari batas diizinkan, itu akan menarik kembali ke arah itu. Jika pengguna melepaskan handle saat berada di luar jangkauan, kita dapat menggunakan animasi spring untuk menarik kembali.

Kami akan membuat proses ini menjadi satu fungsi yang kami dapat menyediakan kepada metode pointerX pipe . Dengan menciptakan fungsi tunggal, fungsi yang dapat dipakai kembali, kita dapat menggunakan kembali potongan kode ini di setiap animasi Popmotion, dengan rentang yang dapat dikonfigurasi dan kekuatan spring.

Pertama, mari kita menerapkan spring ke batas paling kiri. Kita akan menggunakan dua transformers, conditional, dan linearSpring.

conditional mengambil dua fungsi, sebuah pernyataan dan sebuah transformer. Pernyataan tersebut menerima nilai yang diberikan dan mengembalikan baik yang true atau false. Jika kembali true, fungsi kedua akan diberikan nilai untuk diubah dan dikembalikan.

Dalam kasus ini, pernyataannya mengatakan, "jika nilai yang diberikan lebih kecil daripada min, melewati nilai ini melalui linearSpring transformer." LinearSpring adalah fungsi spring sederhana, tidak seperti animasi physics atau spring, tidak memiliki konsep waktu. Memberikan sebuah strength dan sebuah target, dan itu akan menciptakan fungsi yang "menarik" semua nilai yang diberikan terhadap target dengan strength yang ditentukan.

Menggantikan fungsi startDrag kita dengan ini:

Kita sekarang melewati pointer x melalui fungsi springRange kita, jadi jika kamu menarik handle melewati sisi paling kiri, kamu akan melihatnya menarik kembali.

Menerapkan hal yang sama ke sisi paling kanan adalah soal menyusun conditional yang kedua dengan yang pertama menggunakan fungsi pipe yang berdiri sendiri:

Manfaat lain dari menulis fungsi seperti springRange adalah bahwa hal itu menjadi sangat mudah diuji. Fungsi yang dikembalikannya adalah, seperti semua transformers, fungsi murni yang mengambil nilai tunggal. Kamu dapat menguji fungsi ini untuk melihat jika melewati nilai-nilai yang terletak di dalam min dan max tidak berubah, dan jika itu menerapkan spring ke nilai yang tidak ada.

Jika kamu melepaskan handle saat berada di luar jangkauan, sekarang seharusnya kembali ke dalam jangkauan. Untuk itu, kita perlu menyesuaikan fungsi stopDrag untuk mengaktifkan animasi spring:

Fungsi snapHandleToEnd kita terlihat seperti ini:

Kamu dapat melihat bahwa to ditetapkan sebagai 0 atau rangeWidth tergantung pada sisi mana letak slider handle saat ini. Dengan bermain bersama damping dan stiffness, kamu dapat bermain dengan berbagai spring-feels yang berbeda.

Momentum Scrolling

Sentuhan yang bagus pada scrubber iOS yang saya selalu hargai adalah jika kamu melemparkan handle, isecara bertahap akan memperlambat daripada berhenti mati. Kita dapat mengulanginya dengan mudah menggunakan animasi decay.

Dalam stopDrag, mengganti handleX.stop() dengan momentumScroll(x).

Kemudian, di baris setelah fungsi snapHandleToEnd, tambahkan fungsi baru yang disebut momentumScroll:

Sekarang, jika kamu melempar handle itu, itu akan berhenti secara bertahap. Ini juga akan beranimasi di luar jangkauan slider. Kita bisa menghentikan ini dengan lewat clamp transformer ke metode decay.pipe:

Kesimpulan

Menggunakan kombinasi dari fungsi Popmotion yang berbeda, kita dapat membuat sebuah scrubber yang memiliki sedikit lebih hidup dan playfulness dari biasanya.

Dengan menggunakan pipe, kita menyusun fungsi murni sederhana ke dalam perilaku yang lebih kompleks sambil membiarkan potongan komposit dapat diuji dan dapat digunakan kembali.

Langkah Berikutnya

Bagaimana mencoba tantangan ini:

  • Buat momentum scroll diakhiri dengan memantul jika handle menyentuh ujung scrubber.
  • Buatlah handle beranimasi ke titik mana pun pada scrubber ketika pengguna mengklik pada bagian lain dari bar jangkauan.
  • Tambahkan kontrol putar penuh, seperti tombol putar / jeda. Perbarui posisi scrubber handle saat animasi berlangsung.
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.