Pengantar Popmotion: Tween

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

Popmotion adalah perpustakaan animasi JavaScript fungsional. Dibandingkan dengan pustaka lain seperti GreenSock atau Anime.js, Popmotion adalah tingkat rendah dan tidak terdata.

Ini paket satu ton fitur, seperti fisika musim semi dan pelacakan pointer, ke file yang sangat kecil (11.5kb).

Ini memungkinkan pengembang untuk menulis fitur mereka sendiri menggunakan fungsi sederhana, daripada menunggu penulis perpustakaan untuk menambahkannya.

Ini juga berarti mudah untuk menganimasikan objek 3D, bagan, atau komponen React seperti untuk menganimasikan elemen DOM atau SVG

Fleksibilitas ini dapat membuat kurva belajar awal lebih curam daripada untuk perpustakaan lain. Jadi, dalam seri tutorial ini, kita akan mempelajari dasar-dasar animasi kuat Popmotion. Kami akan mulai dengan pekerja keras dari dunia animasi, tween.

Menginstall

Popmotion mendukung berbagai metode pemasangan. Dalam produksi, saya merekomendasikan menginstal melalui npm, karena ini memungkinkan Anda untuk mengimpor hanya bit yang Anda butuhkan, menghemat ruang lebih jauh.

Namun, untuk tutorial ini, Anda dapat mengikuti CodePen ini, yang telah disiapkan dengan Popmotion versi terbaru.

Tween

Bagi mereka yang tidak dikenal, tween transisi antara satu nomor dan yang lain selama jangka waktu yang telah ditentukan. Jika Anda telah menggunakan transisi CSS, fungsi tween Popmotion bekerja persis sama.

Kita dapat mengimpor tween seperti:

1	const { tween } = popmotion;

Secara default, tween menjiwai antara 0 dan 1 selama durasi 300 milidetik. Jika Anda membuka konsol Anda, Anda dapat menguji ini sendiri:

1	tween().start({
2	update: v => console.log(v),
3	complete: () => console.log('complete!')
4	});

Namun kami tidak ingin menganimasikan konsol — kami ingin menggerakkan bola. Untuk ini, Popmotion menyertakan fungsi lain, styler.

Catatan: Dalam contoh pertama ini, kami mendefinisikan update dan fungsi complete. Tetapi jika Anda menyediakan start dengan hanya satu fungsi, itu akan secara otomatis menetapkan untuk update.

Styler

styler digunakan untuk membuat antarmuka get / set untuk gaya HTML dan SVG yang dioptimalkan untuk digunakan dengan animasi (dari pustaka apa pun!).

Dalam contoh di atas, tween menghasilkan angka, jadi kita tentu saja dapat mengatur opacity bola seperti ini (coba):

1	const ball = document.querySelector('.ball');
2
3	tween().start(v => ball.style.opacity = v);

Namun, styler memiliki manfaat sebagai berikut:

Batch merender untuk mencegah meronta-ronta layout.
Render, paling banyak, satu kali per frame.
Memungkinkan transform alat peraga untuk diatur secara individual, memungkinkan animasi independen dari alat peraga seperti scale dan translateX.
Menyatukan model koordinat transformasi CSS dan SVG.
Memahami jenis nilai default, sehingga Anda dapat mengatur translateX (misalnya) tanpa menambahkan 'px'.

Anda juga tidak terbatas untuk menggunakannya di dalam animasi. Anda dapat secara manual mengatur gaya elemen sementara yang lain menjiwai, dan perubahan akan secara otomatis dijadwalkan dan dikelompokkan bersama dengan yang lain.

Jadi, mari di ini impor:

1	const { tween, styler } = popmotion;

Buat styler bola:

1	const ballStyler = styler(ball);

Sekarang kita bisa menggunakan ballStyler untuk mengatur dan menganimasikan setiap properti bola. ballStyler.set fleksibel. Ini dapat mengatur satu properti:

1	ballStyler.set('background', '#f00');

Atau beberapa properti:

1	ballStyler.set({
2	x: 100,
3	y: 100
4	});

Kami ingin menghidupkan opacity untuk saat ini, jadi mari kita ubah animasi kita:

1	tween().start(v => ballStyler.set('opacity', v));

set juga bisa dikeringkan. Dengan memberikannya hanya nama properti, itu akan mengembalikan fungsi setter untuk prop tersebut. Jadi kita bisa merapikan hal di atas dengan menulis:

1	tween().start(ballStyler.set('opacity'));

Sejauh ini, kami hanya menganimasi bola menggunakan properti tween default. Mari kita lihat seberapa serbaguna tween bisa.

Tween Props

tween menerima satu argumen opsional, sebuah objek dari tween properties. Mari kita lihat beberapa alat peraga yang lebih umum digunakan:

`from`/`to`

Tween bisa jadi antara dua bagian. Kami mendefinisikan ini dengan from dan to.

Mari bernyawa translateX dengan menulis ulang 'opacity' ke 'x'. Kemudian, beralih from dan to properti:

1	tween({ from: 0, to: 300 })

Bola Anda sekarang bergerak dari kiri ke kanan dengan 300 piksel.

Namun, saya mengatakan bahwa tween dapat berada di antara dua bagian, bukan hanya angka. Jika kami menyediakan from dan to objek angka dan / atau kumpulan warna, kami dapat menganimasikan beberapa properti sekaligus.

Coba ini:

1	tween({
2	from: { x: 0, background: '#198FE3' },
3	to: { x: 300, background: '#FF1C68' }
4	}).start(ballStyler.set);

Ini adalah cara mudah untuk menghidupkan beberapa alat peraga secara bersamaan.

Lamanya

duration ditentukan dalam milidetik. Secara default, tween akan memakan waktu 300ms, tetapi jika kita menetapkan duration hingga 1000, itu akan memakan waktu satu detik:

tween({
  duration: 1000,
  from: 0,
  to: 300
}).start(ballStyler.set('x'));

Mempermudah

Fungsi pelonggaran digunakan dalam tweening untuk mengubah laju gerakan di seluruh animasi.

Dalam kehidupan nyata, objek tidak mulai atau berhenti pada kecepatan targetnya. Tergantung pada objek, mereka secara bertahap mempercepat, atau secara bertahap memperlambat, atau keduanya.

Fungsi pelonggaran hanya bekerja dengan mengambil kemajuan tween, didefinisikan sebagai angka antara 0 dan 1, dan mengembalikan yang baru.

Anda tidak perlu tahu cara membuat fungsi-fungsi ini karena Popmotion menyediakan banyak untuk Anda.

Impor mereka:

1	const { easing, tween, styler } = popmotion;

Secara default, ease diatur ke easing.easeOut. Ketika suatu fungsi berkurang, itu berarti mulai cepat dan berakhir lambat.

Ini dipilih sebagai default karena keyakinan saya bahwa sebagian besar animasi di antarmuka pengguna harus dimulai sebagai akibat dari tindakan pengguna. Dengan memulai cepat dan berakhir lambat, pengguna akan merasa seolah-olah mereka menanamkan energi mereka, melalui ketukan atau klik mereka, langsung ke antarmuka. Rasanya tajam, hidup, dan responsif.

Untuk banyak animasi yang jauh dari masukan pengguna, atau sendiri, dapat terasa sedikit kurang menggelegar untuk menggunakan animasi yang mudah masuk, seperti easing.easeInOut atau easing.anticipate, yang melakukan tarik-menarik sebelum beranimasi.

Akhirnya, ada fungsi easing.cubicBezier, yang menciptakan fungsi pelonggaran baru berdasarkan kurva pelonggaran, seperti halnya transisi CSS. Ini memberikan tingkat kontrol dan fleksibilitas yang besar terhadap gerakan Anda.

Coba terapkan beberapa di antaranya ke animasi Anda sambil bermain-main dengan duration untuk melihat pengaruhnya terhadap nuansa dan karakternya.

Mengulang

Animasi dapat diulang dalam tiga cara berbeda: loop, yoyo, dan flip.

Loop memulai animasi dari awal. Yoyo mencerminkan tween dengan menjalankannya mundur. Dan flip berlari mundur dan membalik fungsi pelonggaran.

Salah satunya dapat diatur per tween, dan masing-masing ditetapkan sebagai angka yang menunjukkan berapa kali untuk mengulang animasi. Untuk mengulangi selamanya, cukup lewati Infinity:

tween({
  yoyo: Infinity,
  from: 0,
  to: 300
}).start(ballStyler.set('x'));

Putar kembali

Ketika tween dimulai, ia mengembalikan kontrol pemutaran yang bisa kita gunakan untuk mengontrol animasi itu.

1	const controls = tween().start(console.log);

Dalam contoh di atas, controls akan memiliki akses ke semua metode pemutaran ini, seperti stop, pause, dan resume:

const controls = tween({
  duration: 1000,
  from: 0,
  to: 300
}).start(ballStyler.set('x'));

setTimeout(() => controls.stop(), 500);

Kita dapat menggunakan kontrol pemutaran ini untuk pause dan kemudian seek melalui tween:

const controls = tween({
  duration: 1000,
  from: 0,
  to: 300
}).start(ballStyler.set('x'));

controls.pause();
controls.seek(0.5);

Dengan ini, kita bisa membuat animasi yang bisa digosok! Dalam tutorial selanjutnya, kita akan mengeksplorasi cara menggunakan fungsi pointer Popmotion untuk membuat scrub bar, tetapi untuk sekarang Anda dapat menggosok satu tween dengan tween kedua, untuk melihat ini dalam aksi:

const controls = tween({
  from: 0,
  to: 300
}).start(ballStyler.set('x'));

controls.pause();

tween({ duration: 1000 })
  .start(controls.seek);

Keyframes

Untuk transisi sederhana, a-ke-b, tween sangat baik. Untuk urutan yang lebih rumit dari remaja, Popmotion menyediakan fungsi lain yang disebut keyframes.

Mari kita mengimpor sekarang:

1	const { keyframes, easing, tween, styler } = popmotion;

keyframes tweens melalui serangkaian negara linear. Kami menyediakan negara-negara ini ke properti values:

1	keyframes({
2	values: [0, -150, 150, 0],
3	duration: 2000
4	}).start(ballStyler.set('x'));

Seperti tween, kita juga dapat mendefinisikan status ini sebagai objek. Jadi untuk memindahkan bola ke dalam persegi, kita bisa menulis:

1	keyframes({
2	values: [
3	{ x: 0, y: 0 },
4	{ x: -150, y: -150 },
5	{ x: -150, y: 150 },
6	{ x: 150, y: 150 },
7	{ x: 150, y: -150 },
8	{ x: 0, y: 0 }
9	],
10	duration: 2000
11	}).start(ballStyler.set);

Secara default, keyframes akan mengalokasikan setiap tweens ini bagian yang sama dari keseluruhan duration.

Dengan menyediakan larik times, kami dapat menandai setiap negara bagian ini dengan angka antara 0 dan 1. 0 mewakili permulaan animasi, dan 1 mewakili akhir:

1	keyframes({
2	values: [0, -150, 150, 0],
3	times: [0, 0.1, 0.9, 1],
4	duration: 2000
5	}).start(ballStyler.set('x'));

Dengan cara ini, kita dapat menyesuaikan panjang animasi tanpa harus berkomentar setiap segmen individual.

Ini juga memungkinkan setiap animasi untuk diberikan pelonggaran individu dengan properti easings:

keyframes({
  values: [0, -150, 150, 0],
  times: [0, 0.1, 0.9, 1],
  easings: [easing.easeIn, easing.linear, easing.easeOut],
  duration: 2000
}).start(ballStyler.set('x'));

Karena keyframes hanya tween, kita dapat menyesuaikan pemutaran keseluruhannya dengan semua properti yang sama seperti ease dan loop, dan mengendalikannya dengan semua metode yang sama yang kita pelajari sebelumnya.

Kesimpulan

Fungsi tween dan keyframes memungkinkan Anda membuat animasi yang sederhana dan kompleks.

styler membawa manfaatnya sendiri, seperti penggunaan di luar animasi, standardisasi model transformasi CSS dan SVG, dan membuat pengelompokan untuk kinerja animasi yang tinggi.

Dalam tutorial ini, kami hanya membahas beberapa animasi yang ditawarkan oleh Popmotion. Dalam angsuran berikutnya, kita akan menjelajahi pelacakan pointer dan animasi berbasis kecepatan seperti physics dan spring.

Animasi berbasis kecepatan dapat digunakan untuk membuat UI perasaan alami yang bereaksi secara realistis terhadap input pengguna. Sampai jumpa!