آموزش تکنیک حرفه ای Lerp برای انیمیشن ها



visibility  
mode_comment   ۰

lerpدر این مطلب قصد داریم که یک تکنیک ساده و در عین حال حرفه ای رو به شما آموزش بدیم که با استفاده از اون میتونین حالت زیبایی به انیمیشن هاتون بدین. Lerp یک نام خودمونی برای عبارت Linear Interpolation between two points هست که معنای درون یابی خطی بین دو نقطه رو میده. در اینجا میخوایم یک تکنیک ساده و راحت رو بهتون آموزش بدیم که میتونه ظاهر انیمیشن شما رو بهبود ببخشه و حالت خوبی رو برای کاربران به وجود بیاره. اگر قصد دارید که یک شئ رو با استفاده از انیمیشن از یک نقطه به نقطه دیگر منتقل کنید، این تکنیک برای انیمیشن شما قابل اجرا هست.

این تکنیک چطوری کار میکنه؟

فرض کنید که شما موقعیت اولیه و فعلی شئ و همچنین موقعیتی که قصد دارید شئ رو به اونجا منتقل کنید، دارید. شما میتونین بین این دو موقعیت درون یابی کنید و موقعیت رو درون هر فریم به نسبت دلخواهتون به روز رسانی کنید. برای فهم بیشتر کد زیر رو ببینید:

همونطور که دیدید تابع lerp رو ساختیم و این تابع 2 پارامتر position (موقعیت فعلی) و targetPosition (موقعیت مقصد و نهایی) رو قبول میکنه. تابع lerp در هر فریم اجرا میشه و موقعیت افقی x و عمودی y مربوط به شئ رو به روز رسانی میکنه. همونطور که میبینید در هر بار اجرای این تابع، مقدار فعلی x با 20 درصد اختلاف position و targetPosition جمع میشه و باعث میشه که در هر فریم، شئ 20 درصد به موقعیت نهایی یا مقصد نزدیک تر بشه. این اتفاق بصورت همزمان و در هر فریم برای موقعیت عمودی هم اتفاق میوفته و در نهایت بعد از گذشت 5 فریم، شئ به موقعیت نهایی خودش میرسه. هر چه فاصله بین موقعیت فعلی و نهایی کمتر باشه، شئ با سرعت کمتری حرکت میکنه و این حالت باعث به وجود اومدن یک افکت Easing زیبا میشه.

حالا تعدادی مثال در مورد Lerp میبینیم تا بهتر با اون آشنا بشیم. در اینجا میخوایم یک توپ رو قرار بدیم که حرکت ماوس یا لمس کاربر رو دنبال میکنه. این حالت رو درون یک canvas قرار میدیم. خب در ابتدا حالت بدون Lerp رو بررسی میکنیم: همونطور که دیدید زمانی که ماوس رو حرکت میدیم، توپ هم به سرعت و همزمان با ماوس ما حرکت میکنه. اگر به سرعت ماوس رو حرکت بدیم، باعث میشه که توپ به خوبی نمایش داده نشه و همزمان میتونیم توپ رو در چند فریم ببینیم. قطعه کد اصلی نمونه بالا بصورت زیر هست:

در این حالت همونطور که میبینید هر بار که تابع drawBall اجرا میشه، یک دایره در موقعیت x و y رسم میکنه. x و y همون موقعیت فعلی ماوس کاربر هستند. حالت بعدی مربوط به همین انیمیشن به همراه تکنیک Lerp هست. نمونه زیر رو ببینید: همونطور که دیدید در نمونه بالا زمانی که ماوس رو جابجا میکنید، دایره فورا به همراه ماوس حرکت نمیکنه و کم کم فاصله خودش رو کم میکنه تا به ماوس برسه. همونطور که میبینید یک افکت زیبا و نرم برای توپ به وجود میاد و مشکلاتی که در حالت قبل وجود داشت رو برطرف کرده. تنها فرقی که این حالت با نمونه قبل داره کد زیر هست:

میبینید که در اینجا مستقیما دایره رو در موقعیت x و y رسم نکردیم و دایره رو در موقعیت ballX و ballY رسم کردیم. این متغیرها، باعث میشه که در هر فریم و در هر بار اجرای تابع، توپ مورد نظر 10% به موقعیت نهایی نزدیکتر بشه و در نهایت به اون برسه. همونطور که دیدید حالت زیبایی برای انیمیشن به وجود اومد. از این تکنیک میتونین در هر انیمیشنی که از یک نقطه به نقطه دیگر جابجا میشه استفاده کنید. مثلا فرض کنید که یک اسلایدر دارید و میخواید با اسکرول کردن صفحه، موقعیت اون رو تغییر بدین. افکت بدون Lerp بصورت زیر میشه: و افکت با Lerp بصورت زیر میشه: دیدید که در حالت Lerp اسکرول کردن حالت زیبایی رو در اسلایدر به وجود میاره.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

7Learn Experts
comment دیدگاه کاربران

add_circle ارسال دیدگاه

خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :