Web Animations - element.animate() اکنون در Chrome 36 است

Brendan Kenny

انیمیشن در وب زمانی استان جاوا اسکریپت بود، اما با رفتن دنیا به سمت موبایل، انیمیشن‌ها برای نحو اعلانی به CSS منتقل شدند و مرورگرها می‌توانستند بهینه‌سازی‌هایی را با آن انجام دهند. با توجه به اینکه 60 فریم بر ثانیه در تلفن همراه همیشه هدف شماست، منطقی است که هرگز از آنچه مرورگرها می دانند چگونه به طور کارآمد نمایش دهند خارج نشوید.

ابزارهای بیشتری برای کارآمدتر کردن انیمیشن‌های مبتنی بر جاوا اسکریپت به نظر می‌رسد، اما جام مقدس ادغام انیمیشن‌های اعلامی و ضروری است، که در آن تصمیم‌گیری درباره نحوه نوشتن انیمیشن‌های شما بر اساس واضح‌ترین کد است، نه آنچه در یک شکل ممکن است. و نه در دیگری

Web Animations می‌تواند به این تماس پاسخ دهد و قسمت اول آن به شکل element.animate() در Chrome 36 قرار گرفته است. این عملکرد جدید به شما امکان می‌دهد یک انیمیشن صرفاً در جاوا اسکریپت ایجاد کنید و آن را به همان اندازه هر انیمیشن یا انتقال CSS کارآمد اجرا کنید (در واقع، در Chrome 34، دقیقاً همان موتور انیمیشن‌های وب همه این روش‌ها را هدایت می‌کند ).

سینتکس ساده است و اگر تا به حال یک CSS Transition یا Animation نوشته اید، قسمت های آن باید برای شما آشنا باشد:

element.animate([
    {cssProperty: value0},
    {cssProperty: value1},
    {cssProperty: value2},
    //...
], {
    duration: timeInMs,
    iterations: iterationCount,
    delay: delayValue
});

بزرگترین مزیت این عملکرد جدید حذف بسیاری از حلقه‌های نامناسبی است که قبلاً مجبور بودیم از میان آنها بپریم تا انیمیشنی روان و بدون جرقه داشته باشیم.

به عنوان مثال، برای Santa Tracker در سال گذشته، ما می خواستیم به طور مداوم برف ببارد، و ما تصمیم گرفتیم آن را از طریق CSS متحرک کنیم تا بتوان آن را بسیار کارآمد انجام داد .

با این حال، ما می‌خواستیم موقعیت افقی برف را به صورت پویا بر اساس صفحه نمایش و رویدادهایی که در خود صحنه اتفاق می‌افتد انتخاب کنیم، و البته ارتفاع بارش برف (ارتفاع پنجره مرورگر کاربر) تا زمانی که واقعاً متوجه نشده باشیم، مشخص نخواهد شد. در حال اجرا این بدان معنی بود که ما واقعاً مجبور بودیم از CSS Transitions استفاده کنیم، زیرا نوشتن یک انیمیشن CSS در زمان اجرا به سرعت پیچیده می شود (و صدها دانه برف به معنای صدها قانون استایل جدید است).

بنابراین ما رویکرد زیر را اتخاذ کردیم که باید آشنا باشد:

snowFlake.style.transform = 'translate(' + snowLeft + 'px, -100%)';
// wait a frame
snowFlake.offsetWidth;
snowFlake.style.transitionProperty = 'transform';
snowFlake.style.transitionDuration = '1500ms';
snowFlake.style.transform = 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)';

نکته کلیدی در این نظر است که «یک قاب صبر کن». برای شروع موفقیت آمیز یک انتقال، مرورگر باید تصدیق کند که عنصر در موقعیت شروع است. چند راه برای این کار وجود دارد. یکی از رایج‌ترین راه‌ها خواندن از یکی از ویژگی‌های عنصر است که مرورگر را مجبور به محاسبه طرح‌بندی می‌کند، در نتیجه اطمینان حاصل می‌کند که قبل از انتقال به موقعیت پایانی، می‌داند که عنصر دارای موقعیت شروع است. استفاده از این روش به شما این امکان را می دهد که به خاطر دانش برتر خود در زمینه داخلی مرورگر به خودتان تبریک بگویید، در حالی که با هر ضربه کلید همچنان احساس کثیفی می کنید.

در مقابل، فراخوانی معادل element.animate() نمی تواند واضح تر باشد و دقیقاً آنچه را که در نظر گرفته شده است بیان کند:

snowFlake.animate([
    {transform: 'translate(' + snowLeft + 'px, -100%)'},
    {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], 1500);

گزینه های بسیار بیشتری وجود دارد. درست مانند همتایان CSS خود، Web Animations را می توان به تأخیر انداخت و تکرار کرد:

snowFlake.animate([
    {transform: 'translate(' + snowLeft + 'px, -100%)'},
    {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], {
    duration: 1500,
    iterations: 10,
    delay: 300
});

انیمیشن پلیر

element.animate() در واقع یک شی AnimationPlayer را برمی گرداند، که با راه اندازی بیشتر مشخصات Web Animations اهمیت فزاینده ای پیدا می کند. هر دو انیمیشن های ایجاد شده با جاوا اسکریپت و CSS دارای AnimationPlayers مرتبط هستند که به آنها اجازه می دهد به طور یکپارچه به روش های مفید و جالب ترکیب شوند.

با این حال، در حال حاضر، AnimationPlayer تنها دارای دو ویژگی است که هر دو بسیار مفید هستند. با استفاده از AnimationPlayer.cancel() می توانید یک انیمیشن را در هر زمان لغو کنید:

var player = snowFlake.animate([
    {transform: 'translate(' + snowLeft + 'px, -100%)'},
    {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], 1500);
// less than 1500ms later...changed my mind
player.cancel();

و برای آسودگی خاطر همه کسانی که در گذشته سعی کرده اند یک سیستم پویانمایی پیرامون انیمیشن های CSS یا Transition بسازند، Web Animations همیشه پس از اتمام رویداد، رویدادی را فعال می کند:

var player = snowFlake.animate([
    {transform: 'translate(' + snowLeft + 'px, -100%)'},
    {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], 1500);
player.onfinish = function(e) {
    console.log('per aspera ad terra!');
}

آن را امتحان کنید

همه اینها در Chrome 36 ارسال می‌شود و امروز به نسخه بتا می‌رود! اگر می خواهید آن را امتحان کنید، سعی کنید با پیاده سازی بومی در Chrome 36 کار کنید. با این حال، Web Animations polyfill وجود دارد که بخش قابل توجهی بیشتری از مشخصات کامل Web Animations را برای هر یک از مرورگرهای مدرن و همیشه سبز به ارمغان می آورد.

یک نسخه نمایشی از افکت برف برای شما در دسترس است که می‌توانید از نسخه بومی element.animate() و polyfill استفاده کنید.

نظر خود را با ما در میان بگذارید

با این حال، در واقع، این یک پیش نمایش از آنچه در آینده است، منتشر شده است و به طور خاص برای دریافت بازخورد توسعه دهندگان فورا منتشر شده است. ما هنوز مطمئن نیستیم که آیا همه موارد استفاده را انجام داده‌ایم یا هر لبه ناهموار APIهای فعلی را برای انیمیشن حذف کرده‌ایم. تنها راهی که می‌توانیم بدانیم و واقعاً این موضوع را به درستی دریافت کنیم، این است که توسعه‌دهندگان آن را امتحان کنند و به ما اطلاع دهند که چه فکر می‌کنند.

نظرات این پست البته ارزشمند هستند و نظرات مربوط به خود استاندارد را می توان از طریق لیست پستی public-fx به گروه های کاری CSS و SVG ارسال کرد.

به‌روزرسانی، اکتبر 2014 : Chrome 39 از چندین روش دیگر مرتبط با کنترل بازپخش پشتیبانی می‌کند، مانند play() , pause() و reverse() . همچنین از پرش به یک نقطه خاص در جدول زمانی انیمیشن از طریق ویژگی currentTime پشتیبانی می کند. شما می توانید این عملکرد را در این نسخه آزمایشی جدید مشاهده کنید.

با تشکر از Addy Osmani و Max Heinritz برای کمک آنها در این پست.