Apa fungsi pelonggaran?

Saya menemukan situs web keren ini untuk pengembangan game dan memiliki daftar fungsi pelonggaran:

Meskipun situs tersebut berisi deskripsi tentang apa yang mereka buat, itu melampaui kepala saya. Apa fungsi pelonggaran dan untuk apa mereka digunakan?

Memperbarui

Saya menemukan contoh fungsi yang lebih baik dari kode sumber Phaser.io . Fungsi-fungsi ini jauh lebih sederhana daripada jawaban di sini. Mereka hanya mengambil satu parameter k,. Sebagai bagian dari jawaban, saya ingin tahu cara menggunakannya.

Fungsi pelonggaran digunakan untuk interpolasi, biasanya (tetapi tidak harus) dalam animasi / gerak kinematik. Interpolasi linier (lerp) adalah sesuatu yang mungkin pernah Anda dengar. Katakanlah Anda membiarkan wajah tersenyum dari satu sudut layar ke sudut yang lain (sebanyak gambar Anda). Ini berarti smiley akan bergerak dengan kecepatan stabil dari titik A ke titik B. Jika Anda menerapkan ini pada gerakan anggota tubuh, itu akan terlihat sangat robot dan tidak wajar - aktuator / servos yang digunakan robot, lakukan dengan cara ini. Jelas, anggota tubuh manusia bergerak dengan cara yang sangat berbeda. Dan sebagian besar gerakan yang akan Anda lihat di alam akan memiliki kurva gerak yang menarik, daripada kecepatan yang stabil dan tidak berubah yang terlihat dalam interpolasi linier.

Masukkan pelonggaran. Gerakan pelonggaran berarti kecepatannya tidak konstan. Apa yang dicapai ini adalah untuk terlihat lebih realistis. Awasi orang, saksikan hewan yang berbeda, saksikan tanaman yang tertekuk oleh angin, atau bahkan bagaimana hujan yang turun mengubah arah pada hari yang penuh semangat. Perhatikan kecepatan bola saat Anda melemparkannya ke udara dan kembali turun lagi. Tonton gerakan senar gitar saat Anda memetiknya. Masing-masing jenis gerakan ini memiliki kurva berbeda yang menggambarkan kecepatan.

Saya sarankan Anda bermain dengan GreenSock's GSAP online untuk merasakan apa yang dihasilkan berbagai jenis kurva pelonggaran dalam hal gerakan. Ini adalah salah satu hal di mana diperlukan waktu dan latihan untuk memetakan kurva bernama tertentu untuk jenis gerakan yang Anda bayangkan Anda inginkan. Tetapi begitu Anda memahami dasar-dasarnya, Anda akan bersenang-senang.

PS Seperti yang saya katakan, pelonggaran tidak hanya digunakan untuk animasi. Ini dapat digunakan untuk pengarahan suara, untuk memengaruhi gerakan kerangka pada level logis / model, atau hal lain yang dapat Anda pikirkan yang mungkin memerlukan variasi halus spesifik dari waktu ke waktu.

Fungsi pelonggaran memungkinkan Anda menginterpolasi nilai dari satu nilai ke nilai lainnya selama interval tertentu menggunakan sesuatu yang disebut "fungsi pelonggaran". Ini adalah fungsi yang dirancang untuk mengambil nilai dan pada titik tertentu dalam interval, mengeluarkan nilai pada titik waktu tertentu.

Ini dapat dijelaskan dengan paling baik dengan melihat potongan kode:

// simple linear tweening - no easing, no acceleration


Math.linearTween = function (t, b, c, d) {
    return c*t/d + b;
};

@t adalah waktu saat ini (atau posisi) dari tween. Ini bisa berupa detik atau bingkai, langkah, detik, ms, apa pun - selama unitnya sama dengan yang digunakan untuk total waktu

@b adalah nilai awal properti.

@c adalah perubahan antara nilai awal dan tujuan properti.

@ d adalah total waktu tween.

Terima kasih, http://upshots.org/actionscript/jsas-understanding-easing

Ini adalah definisi fungsi pelonggaran linear. Grafik ini dari waktu ke waktu dalam bentuk 't' kita mendapatkan grafik linier belaka.

Oke, keren. Untuk apa kita menggunakannya?

Setiap kali Anda memiliki awal dan selesai dalam pikiran dan ingin menghidupkannya, Anda dapat menggunakan "tween" atau "fungsi pelonggaran".

Sebagai contoh, inilah GIF yang saya ambil dari Angry Birds:

Perhatikan menu meluncur ke titik di layar, tetapi berhenti perlahan? Ini karena fungsi pelonggaran yang memudahkan tempatnya. Anda dapat melihatnya di seluruh web. Jika ini adalah kemudahan linier, itu akan sama di seluruh.

Musik?

Tentu! Jika kita mengambil nilai dari nilai soundtrack kita saat ini dan menyisipkannya di antara itu dan 0 di atas total kata, 1 detik maka volume kita akan perlahan-lahan menghilang selama satu detik.

Objek terikat

Ada juga fungsi yang memungkinkan untuk memantul (lihat: http://easings.net/#easeOutBounce ) yang dapat menghasilkan efek seperti ini pada sprite tanpa sistem fisika:

Anda dapat menemukan informasi lebih lanjut di web dengan mencari tweening.

Fungsi pelonggaran berfungsi untuk mengubah nilai selama periode waktu, dari nomor awal ke nomor akhir.

Anda menggunakan nilai itu untuk menghidupkan properti dari objek di game Anda, seperti posisi, rotasi, skala, mengubah warna, dan properti lainnya yang menggunakan nilai.

Fungsi pelonggaran yang berbeda menentukan "rasa" dari animasi, atau bagaimana nilainya berubah dari waktu ke waktu.

Di situs web yang Anda posting, grafik menunjukkan nilai yang berubah seiring waktu dari awal hingga akhir, jadi itu tidak berarti objek yang Anda animasikan akan mengikuti jalur bola dalam grafik.