سری آموزش های طراحی وب با فریم ورک tedjs (طراحی انیمیشن)

در این جلسه از آموزش فریم ورک تد جی اس ، قصد داریم تا نگاهی بیندازیم به فرایند طراحی یک انیمیشن به وسیله فریم ورک.

فریم ورک ، تابعی به نام animGraph را در اختیار می گذارد تا بتوان انیمیشن های خود را به وسیله طراحی یک نمودار متشکل از چندین معادله درجه دو طراحی کنیم. معادلات توسط خود تابع ایجاد و اجرا می شوند.تنها می بایست برای هر معادله مقدار y (نقطه اوج یا فرود) را به همراه x (طول نمودار) معادله وارد نمایید.

به تصویر زیر دقت کنید:

P1 و P2 دو معادله درجه دو می باشند ، که هرکدام از دو بخش height و length تشکیل شده است.

animGraph برای ساخت معادله درجه دو از تابع tedApi.equation استفاده می کند. این تابع و تابع animGraph دو تابع خارجی هستند و می توان بیرون از حالت کتابخانه ای نیز استفاده کرد.

ارتفاق (height) مقدار y نقطه اوج برای P1 و نقطه فرود برای P2 را نشان می دهد و طول(length) اندازه فاصله شروع معادله تا انتهای معادله را نشان می دهد.

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

خود تابع animGraph سه ورودی دریافت می نماید. ورودی اول آرایه ای از داده های معادلات می باشد ، ورودی دوم تابعی است که در هرقدم فرایند انیمیشن اجرا می شود ورودی سوم تابع callback انتهای فرایند است.دو تابع مذکور، خود دو ورودی دریافت می کنند که به ترتیب x و y نقطه درحال پردازش یا پردازش شده می باشد.

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

شی ای که ساخته می شود (animObject) دارای توابع زیر می باشد:

تابع start : این تابع وظیفه شروع فرایند انیمیشن را دارد ، که یک ورودی بولین به عنوان کنترلر دریافت می کند.

درصورتی که ورودی مقدار درست (True)  باشد ، بدان معناست که انیمیشن تا زمانی که دستور مستقیم توقف صادر نشده است به اجرا ادامه دهد.

تابع stop : این تابع برای توقف کامل انیمیشن به کار می رود. پس ازفراخوانی این تابع ، تابع callback فراخوانده شده و تمامی مقادیر انیمیشن دوباره بارگذاری می شود.

تابع end : این تابع نیز همانند stop عمل می کند با این تفاوت که مقادیر انیمیشن را دوباره بارگذاری نخواهد کرد.

تابع pause : این نیز مانند دو تابع قبلی وظیفه توقف عملیات را دارد با این تفاوت که تابع callback فراخوانی نمی شود و داده ها نیز  reset نمی شوند.

تابع continue : تابع "ادامه" برای اجرای دوباره فرایند متوقف شده از آخرین نقطه توقف به وسیله توابع end یا pause به کار می رود.

تابع gravity : تابع جاذبه که از نسخه ۱٫۱٫۳ به فریم ورک اضافه شده است، برای تعیین اینکه انیمیشن با واکنش به جاذبه انجام شود یا خیر استفاده می شود. به طور پیش فرض مقدار ورودی این تابع false می باشد که به این معنیست ، انیمیشن بر اساس فریم ریت (FPS) سیستم شما نمایش داده شود اما درصورتی که مقدار ورودی را true وارد نمایید ، انیمیشن براساس زمان بندی خود معادلات انجام می شود که نوعی جاذبه را تلقین خواهد کرد.

به عنوان مثال به نمونه زیر دقت کنید:

این کد ، یک مثال از استفاده از تابع animGraph می باشد که از طریق آن در canvas طرحی را ایجاد می کنیم.

ابتدا canvas را انتخاب می کنیم و شاخصه های آن را تعیین می کنیم.

حال تابع دوران را می نویسیم.

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

حال می بایست شی animGraph را ایجاد نماییم. شی مورد نظر animObject می باشد.

حال تنها کافیست انیمیشن را اجرا کنیم. در این کد جاذبه(Gravity) را true قرار داده ایم تا بر اساس زمان بندی خود معادله ، نمایش داده شود.

کد های انیمیشن به پایان رسید که می توان این کتابخانه را به صفحه HTML خود الصاق کنید.

این یک نمونه استفاده از این تابع می باشد (این مثال برای درک بهتر فرایند این تابع نوشته شده است). شما می توانید fade ، bounce وبسیاری دیگر از افکت ها و انیمیشن هارا از این طریق پیاده سازی نمایید.

در زیر می توانید مثال را تغییر دهید و نتیجه را نیز مشاده نمایید.








دسته بندی: آموزش, فریم ورک تد جی اس, مقاله

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *