بهبود انیمیشن های وب در کروم 50

Web Animations API که برای اولین بار در Chrome 36 عرضه شد، کنترل راحت جاوا اسکریپت انیمیشن ها را در مرورگر فراهم می کند و همچنین در Gecko و WebKit پیاده سازی می شود.

کروم 50 تغییراتی را برای بهبود قابلیت همکاری با سایر مرورگرها و سازگاری بیشتر با مشخصات ارائه می کند. این تغییرات عبارتند از:

• لغو رویدادها
• Animation.id
• تغییر حالت برای متد pause()
• منسوخ شدن نام های چین دار به عنوان کلید در فریم های کلیدی

در Chrome 51، برخی از این تغییرات نهایی شده است:

• حذف نام های چین دار به عنوان کلید در فریم های کلیدی

لغو رویدادها

رابط انیمیشن شامل روشی برای لغو یک انیمیشن است که به طرز خنده‌داری به نام cancel() است. کروم 50 اجرای رویداد لغو را زمانی که متد طبق مشخصات فراخوانی می‌شود، اجرا می‌کند، که در صورت راه‌اندازی اولیه، مدیریت رویداد را از طریق ویژگی oncancel آغاز می‌کند.

پشتیبانی از Animation.id

وقتی یک انیمیشن با استفاده از element.animate() ایجاد می‌کنید، می‌توانید تعدادی از ویژگی‌ها را ارسال کنید. به عنوان مثال، در اینجا یک مثال از متحرک کردن کدورت روی یک شی است:

element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);

با مشخص کردن ویژگی id ، آن را بر روی شی Animation برگردانده شده تنظیم می‌کند که می‌تواند هنگام اشکال‌زدایی محتوای شما در زمانی که شی‌های انیمیشن زیادی دارید، به شما کمک کند. در اینجا مثالی از نحوه تعیین id برای انیمیشنی که نمونه سازی می کنید آورده شده است:

element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});

تغییر حالت برای متد ()pause

متد pause() برای توقف موقت انیمیشنی که در حال انجام است استفاده می شود. اگر وضعیت انیمیشن را با استفاده از ویژگی playState بررسی کنید، باید پس از فراخوانی متد paused() paused تنظیم شود. در نسخه‌های کروم قبل از 50، اگر انیمیشن هنوز شروع نشده بود، مشخصه playState idle نشان می‌داد، اما اکنون وضعیت صحیح را نشان می‌دهد که paused است.

حذف نام های چین دار به عنوان کلید در فریم های کلیدی

برای رعایت بیشتر مشخصات و سایر پیاده سازی ها، Chrome 50 در صورت استفاده از نام های چین دار برای کلیدها در انیمیشن های فریم کلیدی، هشداری به کنسول ارسال می کند. رشته های صحیح برای استفاده نام camelCase مطابق با الگوریتم تبدیل ویژگی CSS به IDL هستند.

به عنوان مثال، ویژگی CSS margin-left از شما می خواهد که به عنوان کلید از marginLeft عبور کنید.

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

خلاصه

این تغییرات پیاده‌سازی انیمیشن‌های وب کروم را به پیاده‌سازی‌های دیگر مرورگرها نزدیک‌تر می‌کند و با مشخصاتی که همگی به ساده‌سازی محتوای صفحه وب برای همکاری بهتر کمک می‌کنند، سازگارتر است.

Web Animations API که برای اولین بار در Chrome 36 عرضه شد، کنترل راحت جاوا اسکریپت انیمیشن ها را در مرورگر فراهم می کند و همچنین در Gecko و WebKit پیاده سازی می شود.

کروم 50 تغییراتی را برای بهبود قابلیت همکاری با سایر مرورگرها و سازگاری بیشتر با مشخصات ارائه می کند. این تغییرات عبارتند از:

• لغو رویدادها
• Animation.id
• تغییر حالت برای متد pause()
• منسوخ شدن نام های چین دار به عنوان کلید در فریم های کلیدی

در Chrome 51، برخی از این تغییرات نهایی شده است:

• حذف نام های چین دار به عنوان کلید در فریم های کلیدی

لغو رویدادها

رابط انیمیشن شامل روشی برای لغو یک انیمیشن است که به طرز خنده‌داری به نام cancel() است. کروم 50 اجرای رویداد لغو را زمانی که متد طبق مشخصات فراخوانی می‌شود، اجرا می‌کند، که در صورت راه‌اندازی اولیه، مدیریت رویداد را از طریق ویژگی oncancel آغاز می‌کند.

پشتیبانی از Animation.id

وقتی یک انیمیشن با استفاده از element.animate() ایجاد می‌کنید، می‌توانید تعدادی از ویژگی‌ها را ارسال کنید. به عنوان مثال، در اینجا یک مثال از متحرک کردن کدورت روی یک شی است:

element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);

با مشخص کردن ویژگی id ، آن را بر روی شی Animation برگردانده شده تنظیم می‌کند که می‌تواند هنگام اشکال‌زدایی محتوای شما در زمانی که شی‌های انیمیشن زیادی دارید، به شما کمک کند. در اینجا مثالی از نحوه تعیین id برای انیمیشنی که نمونه سازی می کنید آورده شده است:

element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});

تغییر حالت برای متد ()pause

متد pause() برای توقف موقت انیمیشنی که در حال انجام است استفاده می شود. اگر وضعیت انیمیشن را با استفاده از ویژگی playState بررسی کنید، باید پس از فراخوانی متد paused() paused تنظیم شود. در نسخه‌های کروم قبل از 50، اگر انیمیشن هنوز شروع نشده بود، مشخصه playState idle نشان می‌داد، اما اکنون وضعیت صحیح را نشان می‌دهد که paused است.

حذف نام های چین دار به عنوان کلید در فریم های کلیدی

برای رعایت بیشتر مشخصات و سایر پیاده سازی ها، Chrome 50 در صورت استفاده از نام های چین دار برای کلیدها در انیمیشن های فریم کلیدی، هشداری به کنسول ارسال می کند. رشته های صحیح برای استفاده نام camelCase مطابق با الگوریتم تبدیل ویژگی CSS به IDL هستند.

به عنوان مثال، ویژگی CSS margin-left از شما می خواهد که به عنوان کلید از marginLeft عبور کنید.

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

خلاصه

این تغییرات پیاده‌سازی انیمیشن‌های وب کروم را به پیاده‌سازی‌های دیگر مرورگرها نزدیک‌تر می‌کند و با مشخصاتی که همگی به ساده‌سازی محتوای صفحه وب برای همکاری بهتر کمک می‌کنند، سازگارتر است.