شروع کار با JavaScript Animation API

shape
shape
shape
shape
shape
shape
shape
shape

همان طور که می دانید اضافه کردن انیمیشنها به محیط کاربری وب ، باعث القا شدن حس تعامل بین صفحه های وب و کاربر میشود. در این مقاله با استفاده از CSS و Javascript وب انیمیشن خواهیم ساخت( شروع کار با JavaScript Animation API ) .

 

شروع کار با JavaScript Animation API

بسته شدن منوی کناری سایت با افکت انیمیشنی و روان نسبت به منویی که بدون افکت غیب میشود تجربه ی بهتری از کار با سایت را به کاربر میدهد.

برای ساخت انیمیشن ها تا اینجا، در محیط وب از CSS transition ها، CSS Keyframe ها و یا یک کتابخانه ی جداگانه مثل Animate.css یا Velocity بهره میبردیم اما حالا با استفاده از api جدید و تحت جاوا اسکریپت میتوانیم هر کدام از اجزای html که لازم داشتیم را فقط با کد جاوااسکریپت و در همان فایل js متحرک کنیم.

ساخت انیمیشن

حال برای نشان دادن ویژگی های این api جدید، یکبار با استفاده از CSS و بار دیگر بااستفاده از Javascript، انیمیشنی را خلق میکنیم.
ویرایشگر پایین دارای دو div است که در هنگام کلیک به سمت راست حرکت داده میشوند و همزمان رنگ آنها نیز عوض میشود. مربع با استفاده از CSS Keyframe متحرک شده و دایره نیز با استفاده از JS Web Animations API.

کد html

شروع کار با JavaScript Animation API

کد CSS

شروع کار با JavaScript Animation API
شروع کار با JavaScript Animation API

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

کد js

شروع کار با JavaScript Animation API

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

خروجی:

شروع کار با JavaScript Animation API

شروع کار با JavaScript Animation API

 

بیشتر برنامه نویسان، احتمالا با قسمتی که با Keyframe ساخته شده آشنایی دارند، ما این کد را در مرحله ی نخست بررسی میکنیم:

استفاده از CSS برای ساخت انیمیشن

ما کد مربوط به انیمیشن css را در قسمت keyframe تعریف کردیم که timeline از کلیه ی حرکت ها(transition) را در بر دارد. زمانی که حرکات مربوط به هر قسمت را تعریف کردیم، میتوانیم آنها را به وسیله ی پراپرتی animation و گزینه های موجود برای آن به یک سلکتور متصل کنیم.

 

شروع کار با JavaScript Animation API

 

 

 

 

 

 

 

 

 

 

ما قصد داریم تا انیمیشن در هنگام تعامل کاربر شروع شود، پس ما از event listener هنگام کلیک کاربر استفاده میکنیم که یک کلاس را به جزء html مناسب متصل میکند.

شروع کار با JavaScript Animation API

 

 

 

 

 

هر چند این روش به خوبی کار میکند اما تا حدودی غیر مستقیم به نظر میرسد، ما رویدادهایی که رخ میدهند را در فایل CSS تعریف کردیم، اما درواقع این فایل JS بود که کار اصلی را شروع میکرد. همچنین زمانی که کد اجرا شود ما دسترسی محدودی به انیمیشن(برای انجام تغییرات) خواهیم داشت.هر دو این مشکلات مطرح شده در api وب انیمیشن قابل حل میباشند.

استفاده از جاوااسکریپت ما میتوانیم تقریبا با همان کد هایی که در css نوشته بودیم حرکت شی را در جاوااسکریپت تعریف کنیم:

شروع کار با JavaScript Animation API

 

 

 

 

 

 

 

 

هر شیء داخل آرایه یکی از حالات انیمیشن را نشان میدهد. حالت ها بصورت برابر در زمان تقسیم شده اند(سه حالتِ 0 درصد، 50 درصد و 100 درصد)، مگر اینکه ما با استفاده از گزینه ی offset زمانبندی را تغییر دهیم، همانطور که در حالت میانی این کار را انجام داده ایم.
پس از تعریف آرایه ی animation، میتوانیم آن را با تابع animate() صدا بزنیم. این تابع شی با همان مقادیر پراپرتی animation که در css داشتیم را بعنوان آرگومان دوم میگیرد(با نام هایی متفاوت از آنچه در قسمت css دیدیم، نام هایی مثل animation-fill-mode که همان fill است و animation-iteration-count که iterationمیباشد و ….

شروع کار با JavaScript Animation API

 

 

 

 

 

همانطور که میبینید روش JS با استفاده از انیمیشن های ذخیره شده در یک متحرک و تابع animate() برای انجام دادن هر کاری که لازم باشد، بسیار سازمان دهی شده تر از روش css عمل میکند.

کنترل انیمیشن ها

Api وب انیمیشن همچنین به کاربر اجازه میدهد تا دوباره یک انیمیشن را به آسانی و با شیوه های مختلف کنترل کند. تابع animate() یک شیء animation را برمیگرداند که ما میتوانیم آن را در یک متغیر بریزیم و بعدا از آن استفاده کنیم.

شروع کار با JavaScript Animation API

 

 

این api توابع زیر را در اختیار ما میگذارد:
Pause – انیمیشن را در حالت کنونی اش نگه میدارد
Play – انیمیشن را از حالت pause خارج میکند و در صورتی که پایان یافته بود دوباره آن را اجرا میکند.
Reverse – حرکت انجام شده را به صورت معکوس انجام میدهد.
Finish – پایان انیمیشن را نشان میدهد (درصورتی که معکوس شده باشد آغاز را نشان میدهد)
Cancel – پخش انیمیشن را متوقف میکند و به حالت آغازین میرود

در پایین انیمیشنی از گردانه ی متحرک و بینهایت loading… را مشاهده میکنید. ما دکمه هایی را برای حالت ها و رویدادهای مختلف تنظیم کرده ایم تا بتوانید آنها را امتحان کنید:

کد JS

شروع کار با JavaScript Animation API

 

 

 

 

 

 

 

 

 

 

 

 

 

کد HTML

شروع کار با JavaScript Animation API

 

 

 

 

کد CSS

شروع کار با JavaScript Animation API

 

 

 

 

 

 

شروع کار با JavaScript Animation API

 

پراپرتی ها و event listener ها

شیء انیمیشن که از تابع ()animate بازگردانده می شود پراپرتی های مفید زیادی را در خود نگه میدارد که دسترسی به گزینه هایی مانند زمان فعلی، نرخ پلی بک و چیزهای دیگری را به ما می دهد. با وجود اینکه برخی از آنها فقط قابلیت خواندن(read-only) دارد ولی بیشتر آنها هم قابلیت تنظیم و هم قابلیت برگرداندن مقادیر(set & get) را دارند.
شما میتوانید کد جاوا اسکریپت زیر را مشاهده کنید تا ببینید این پراپرتی ها چگونه کار می کنند برای مشاهده لیست کامل این پراپرتی ها به سایت MDN مراجعه کنید.

کد JS

شروع کار با JavaScript Animation API

 

 

 

 

 

 

 

 

 

 

 

کد HTML

شروع کار با JavaScript Animation API

 

 

 

 

کد CSS

شروع کار با JavaScript Animation API

 

 

 

 

 

 

 

شروع کار با JavaScript Animation API

علاوه بر اینها، این api دو event handler کاربردی را در مواقعی که انیمیشن تمام شده یا کنسل شده نیز برای ما فراهم می آورد:

شروع کار با JavaScript Animation API

 

 

 

 

 

زمانی که حرف کارایی به میان می آید نباید فرقی بین css و جاوا اسکریپت باشد چون مرورگرها از یک موتور مشابه برای اجرای هر دو استفاده می کند. اگر شما فقط از انیمیشن هایی که نیاز به دوباره اجرا شدن ندارند استفاده میکنید، مثل transform یا opacity، نرخ به روز رسانی تصویر آن باید ۶۰ فریم ثانیه بماند.

جمع بندی

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

مطالعه بیشتر

 

 

 

منبع

 

 

 

 

 

 

 

 

 

 

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

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