API مربوط به انیمیشن‌های وب، توابع اولیه قدرتمندی را برای توصیف انیمیشن‌های دستوری جاوا اسکریپت ارائه می‌دهد - اما این به چه معناست؟ درباره منابع موجود، از جمله دموها و آزمایشگاه‌های کد گوگل، اطلاعات کسب کنید.
پیشینه
در هسته خود، API متد Element.animate() را ارائه می‌دهد. بیایید مثالی را ببینیم که رنگ پس‌زمینه را از قرمز به سبز متحرک می‌کند.
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
این روش در تمام مرورگرهای مدرن پشتیبانی می‌شود، به همراه یک جایگزین عالی برای polyfill (که بعداً بیشتر در مورد آن صحبت خواهیم کرد). پشتیبانی بومی از این روش - و شیء پخش‌کننده آن - به عنوان بخشی از کروم ۳۹ به طور گسترده در دسترس قرار گرفت. همچنین به صورت بومی در اپرا نیز موجود است و برای فایرفاکس نیز در حال توسعه فعال است. این یک روش اولیه قدرتمند است که شایسته جایگاهی در جعبه ابزار شماست.
کدلبز
تعداد فزاینده‌ای از آزمایشگاه‌های کد برای API انیمیشن‌های وب در دسترس هستند . این‌ها راهنماهای خودآموزی هستند که مفاهیم مختلف در API را نشان می‌دهند. در بیشتر این آزمایشگاه‌های کد، محتوای استاتیک را می‌گیرید و آن را با جلوه‌های انیمیشنی بهبود می‌بخشید.
اگر به دنبال درک مفاهیم اولیه جدید موجود در انیمیشن‌های وب هستید، این آزمایشگاه‌های کد و لینک‌ها یا منابع مرتبط، بهترین نقطه شروع برای شما هستند. برای ایده‌ای از آنچه ممکن است بسازید، این جلوه آشکارسازی الهام گرفته از اندروید را بررسی کنید-
بنابراین اگر تازه شروع کرده‌اید، دیگر جستجو نکنید!
دموها
اگر به دنبال الهام گرفتن هستید، حتماً دموهای انیمیشن‌های وب الهام گرفته از متریال را که سورس آنها در گیت‌هاب قرار دارد، بررسی کنید. این دموها جلوه‌های شگفت‌انگیز متنوعی را نشان می‌دهند و می‌توانید کد منبع هر دمو را به صورت درون‌خطی مشاهده کنید.
این دموها شامل یک کهکشان چرخان رنگارنگ ، زمین چرخان یا حتی انواع جلوه‌های ویژه روی یک عنصر ساده قدیمی می‌شوند.
پلی‌فیل
برای اطمینان از پشتیبانی عالی در تمام مرورگرهای مدرن، می‌توانید از یک کتابخانه polyfill استفاده کنید. API وب انیمیشن‌ها در حال حاضر یک polyfill در دسترس دارد که آن را برای همه مرورگرهای مدرن، از جمله اینترنت اکسپلورر، فایرفاکس و سافاری، فراهم می‌کند.
اگر اهل ماجراجویی هستید، می‌توانید از چندپرکننده‌ی web-animations-next استفاده کنید که شامل ویژگی‌هایی است که هنوز نهایی نشده‌اند - مانند سازنده‌های قابل ترکیب GroupEffect و SequenceEffect . برای مقایسه‌ی بین این دو چندپرکننده، به صفحه‌ی اصلی مراجعه کنید .
برای استفاده از هر یک از این دو نوع polyfill در کد خود، چند گزینه دارید.
از یک CDN مانند cdnjs ، jsDelivr استفاده کنید یا از طریق rawgit.com یک نسخه خاص را هدف قرار دهید.
نصب با استفاده از NPM یا Bower
$ npm install web-animations-js $ bower install web-animations-js ```
در همه موارد، می‌توانید به سادگی polyfill را در یک تگ اسکریپت قبل از هر کد دیگری قرار دهید-
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
document.body.animate([
{'background': 'red'},
{'background': 'green'}
], 1000);
</script>
منابع دیگر
اگر مایل به خواندن مقدمه‌ای فنی‌تر هستید، مشخصات W3C را بررسی کنید.
دن ویلسون همچنین مجموعه‌ی بسیار خوبی از پست‌ها در مورد انیمیشن‌های وب نوشته است، از جمله در مورد نحوه‌ی استفاده از آن در کنار ویژگی جدید motion-path در CSS . برای مشاهده‌ی برخی از نمونه‌های استفاده از motion-path ، به سند اریک ویلیگرز مراجعه کنید.