آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

شروع کار مقدماتی با HTML5 Canvas (جلسه 25) : انیمیشن مقدماتی - قسمت 2

0 76 ۲۷ اردیبهشت ۹۶

html-canvas

در جلسه قبل مقدماتی در مورد ساخت انیمیشن رو بهتون توضیح دادیم و در این جلسه قصد داریم این موضوع رو ادامه بدیم.

زمانبندی به روز رسانی انیمیشن

راه متداولی که برای ساخت انیمیشن وجود داره اینه که یک تابع اصلی رو به وجود میارن که ساخت و جلو رفتن انیمیشن رو کنترل میکنه. ما باید این تابع رو در لحظه های خاص و در دوره های زمانی خاصی اجرا کنیم تا انیمیشن ما و فریم های مربوط به اون پشت سر هم قرار بگیرن و خروجی نمایش داده بشه. برای اینکار سه متد window.setInterval و window.setTimeout و window.requestAnimationFrame وجود داره که میتونین توابع مورد نظرتون رو در دوره زمانی خاصی اجرا کنید.

متد setInterval:

برای استفاده از این متد بصورت زیر عمل میکنیم:

با استفاده از این متد میتونین تابع function رو با فواصل زمانی delay که واحد اون میلی ثانیه هست، اجرا کنید.

متد setTimeout:

برای استفاده از این متد بصورت زیر عمل میکنیم:

با استفاده از این متد میتونین تابع function رو بعد از گذشت زمان delay میلی ثانیه، فقط برای یکبار اجرا کنید.

متد requestAnimationFrame:

برای استفاده از این متد بصورت زیر عمل میکنیم:

همونطور که میدونین مرورگر تقریبا در هر ثانیه، 60 بار صفحه رو مجددا paint یا نقاشی میکنه و به اون اصطاح repaint میگن. با هر بار paint، کل صفحه دوباره رسم میشه و صفحه رفرش میشه. پس repaint، تقریبا هر 16.7 میلی ثانیه اتفاق میوفته و شما زمانی که از متد requestAnimationFrame استفاده می کنید، تابع callback مورد نظر، قبل از هر بار repaint شدن، اجرا میشه.

شما میتونین از رویدادهایی که توسط کاربرانتون به وجود میاد، استفاده کنید و انیمیشن مورد نظر رو کنترل کنید و یا اینکه از متد setInterval استفاده کنید و تابع مربوط به انیمیشن رو در بازه های زمانی خاص، اجرا کنید. اگر شما قصد داشته باشید که یک بازی رو بسازید، مثلا میتونین از رویدادهای ماوس و کلیدهای کیبورد، شخصیتهای کارتونی بازی رو تکان دهید و انیمیشن مربوط به اون رو کنترل کنید.

متد requestAnimationFrame، متد بهینه تر و با کیفیت تری هست که انیمیشن شما رو دقیقا زمانی که لازم هست و قبل از repaint شدن دوباره صفحه اجرا میکنه و هیچ کار اضافه و بیهوده ای انجام نمیشه. حالا تعدادی مثال با هم میبینیم که شما رو بهتر با انیمیشن ها آشنا میکنه.

ساخت انیمیشن منظومه شمسی:

در این مثال میخوایم یک مدل کوچک از منظومه شمسی رو برای شما شبیه سازی کنیم. کد زیر رو در نظر بگیرید:

همونطور که دیدید در ابتدا سه تصویر برای خورشید و ماه و زمین ساخته شده و بعد از اون دو تابع init و draw قرار داده شده و تابع init در آخر صدا زده میشه و این تابع کارهای ابتدایی رو انجام میده. تابع draw هم کارهای مربوط به انیمیشن و رسم شکل ها رو بر عهده داره. مرحله بعد بصورت زیر هست:

همونطور که دیدید درون تابع init، برای هر سه تصویر ساخته شده، آدرس تصویر رو قرار دادیم و در آخر هم با استفاده از متد requestAnimationFrame، تابع draw رو اجرا میکنه. اگر بخواید که متد requestAnimationFrame قبل از هر بار Repaint شدن، اجرا بشه، باید این متد رو در آخر تابع draw مجددا استفاده کنید.

میبینید که در تابع draw ابتدا زمینه 2 بعدی canvas رو بدست آوردیم. بعد از اون نوع ترکیب شدن رو بصورت destination-over قرار دادیم و با اینکار شکلهای جدیدی که رسم میشن در پشت شکلهای قدیمی قرار میگیرن. بعد از اون با استفاده از متد clearRect کل canvas رو پاک کردیم. بعد از اون هم استایلها رو مشخص کردیم و وضعیت فعلی رو ذخیره و در آخر هم محورهای مختصات رو 150 پیکسل در دو جهت عمودی و افقی جابجا کردیم. مرحله بصورت زیر است:

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

به همین راحتی. در جلسه بعد انیمیشنهای بیشتری رو در اختیارتون قرار میدیم.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

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

موفق باشید

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram