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

- visibility ٠ mode_comment

html-canvas

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

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

مراحل ساخت انیمیشن ساده:

  1. پاک کردن Canvas شما باید هر شکلی که از قبل، بر روی Canvas رسم کردید رو پاک کنید بجز مواردی که کل Canvas رو پوشش دادن (مانند رنگ پس زمینه یا تصویر پس زمینه). راحتترین کار در این زمینه، استفاده از متد clearRect هست که با استفاده از اون به راحتی میتونین کل فضای مورد نیازتون رو حذف کنید.
  2. ذخیره حالت Canvas اگر شما تنظیماتی رو تغییر دادید (تنظیماتی از قبیل استایلها و تبدیل ها و ...) که بر روی حالت فعلی Canvas تاثیر میزاره و قصد دارید هر بار که هر فریم رو رسم میکنید، تنظیمات اصلی مورد استفاده قرار بگیره، شما باید حالت اصلی رو یکبار ذخیره کنید و در هر فریم اون رو بازگردانی کنید.
  3. رسم شکل انیمیشنی مرحله ای که شما اشکال مربوط به فریم مورد نظرتون رو رسم میکنید.
  4. بازگردانی حالت Canvas اگر شما حالت اصلی Canvas رو ذخیره کردید، قبل از اینکه فریم جدید رو رسم کنید، حالت ذخیره شده رو بازگردانی کنید.

کنترل کردن انیمیشن:

شکلهایی که بر روی Canvas رسم میشن رو میتونین با استفاده از متدهای گفته شده یا توابع سفارشی خاص به وجود بیارید. در حالت عادی ما فقط نتیجه رسم شده بر روی Canvas رو زمانی که اسکریپت و کدهای Javascript اجرا میشن و به پایان میرسن، میبینیم. برای مثال ما نمیتونیم که با استفاده از یک حلقه یا loop، یک انیمیشن رو درست کنیم. یعنی اینکه ما باید اون تابعی که شکل های مورد نظر رو برای ما رسم میکنه رو در زمانهای خاص و بصورت دوره ای اجرا کنیم. در جلسه بعد بیشتر در مورد ساخت انیمیشن براتون توضیح میدیم.

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

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

موفق باشید

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.