کنترل پخش انیمیشن های وب در کروم 39

Sam Thorogood

در اوایل سال جاری، Chrome 36 روش element.animate را به عنوان بخشی از مشخصات گسترده‌تر Web Animations ارائه کرد. این امکان را برای انیمیشن‌های کارآمد و بومی فراهم می‌کند که به طور ضروری نوشته شده‌اند - به توسعه‌دهندگان این امکان را می‌دهد تا انیمیشن‌ها و انتقال‌های خود را با مناسب‌ترین رویکرد برای خود بسازند.

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

var player = cloud.animate([
    {transform: 'translateX(' + start + 'px)'},
    {transform: 'translateX(' + end + 'px)'}
], 5000);
player.onfinish = function() {
    console.info('Cloud moved across the screen!');
    startRaining(cloud);
};

این به تنهایی فوق العاده آسان است و ارزش آن را دارد که به عنوان بخشی از جعبه ابزار خود در هنگام ساخت انیمیشن یا انتقال ضروری در نظر بگیرید. با این حال، در Chrome 39، ویژگی‌های کنترل پخش به شی AnimationPlayer که توسط element.animate برگردانده شده است، اضافه شده است. قبلاً، پس از ایجاد یک انیمیشن، فقط می‌توانستید cancel() فراخوانی کنید یا به رویداد finish گوش دهید.

این اضافات پخش، امکاناتی را که Web Animations می تواند انجام دهد را باز می کند - تبدیل انیمیشن ها به یک ابزار همه منظوره، به جای تجویز در مورد انتقال، به عنوان مثال، انیمیشن های "ثابت" یا از پیش تعریف شده.

مکث، عقب بردن یا تغییر نرخ پخش

بیایید با به‌روزرسانی مثال بالا شروع کنیم تا در صورت کلیک روی ابر، انیمیشن را متوقف کنیم:

cloud.addEventListener('mousedown', function() {
    player.pause();
});

همچنین می توانید ویژگی playbackRate را تغییر دهید:

function changeWindSpeed() {
    player.playbackRate *= (Math.random() * 2.0);
}

همچنین می‌توانید متد reverse() فراخوانی کنید که معمولاً معادل معکوس کردن playbackRate فعلی است (ضرب در -1). با این حال، چند مورد خاص وجود دارد:

• اگر تغییر ایجاد شده توسط متد reverse() باعث شود انیمیشن در حال اجرا به طور موثر پایان یابد، currentTime نیز معکوس می شود - به عنوان مثال، اگر یک انیمیشن کاملاً جدید معکوس شود، کل انیمیشن به عقب پخش می شود.

• اگر پخش کننده متوقف شود، انیمیشن شروع به پخش می کند.

تمیز کردن بازیکن

AnimationPlayer اکنون اجازه می دهد تا currentTime خود را در حین اجرای یک انیمیشن تغییر دهید. به طور معمول، این مقدار در طول زمان افزایش می یابد (یا کاهش می یابد، اگر playbackRate منفی باشد). این ممکن است امکان کنترل موقعیت یک انیمیشن را به صورت خارجی، شاید از طریق تعامل کاربر، فراهم کند. این معمولا به عنوان شستشو نامیده می شود.

به عنوان مثال، اگر صفحه HTML شما نمایانگر آسمان است، و می‌خواهید یک حرکت حرکتی برای تغییر موقعیت یک ابر در حال پخش در حال حاضر تغییر دهید، می‌توانید چند کنترل کننده به سند اضافه کنید:

var startEvent, startEventTime;
document.addEventListener('touchstart', function(event) {
    startEvent = event;
    startEventTime = players.currentTime;
    player.pause();
});
document.addEventListener('touchmove', function(event) {
    if (!startEvent) return;
    var delta = startEvent.touches[0].screenX -
        event.changedTouches[0].screenX;
    player.currentTime = startEventTime + delta;
});

همانطور که روی سند می کشید، currentTime تغییر می کند تا فاصله را از رویداد اصلی شما منعکس کند. همچنین ممکن است بخواهید پس از پایان حرکت، پخش انیمیشن را از سر بگیرید:

document.addEventListener('touchend', function(event) {
    startEvent = null;
    player.play();
});

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

به جای پاک کردن AnimationPlayer در پاسخ به تعامل کاربر، currentTime آن نیز می تواند برای نشان دادن پیشرفت یا وضعیت استفاده شود: به عنوان مثال، برای نشان دادن وضعیت دانلود.

ابزاری که در اینجا وجود دارد این است که AnimationPlayer اجازه می دهد یک مقدار تنظیم شود و پیاده سازی اصلی زیربنایی از تجسم پیشرفت آن مراقبت کند. در مورد دانلود، مدت زمان یک انیمیشن را می‌توان روی اندازه کل دانلود و currentTime را روی اندازه دانلود شده فعلی ( دمو ) تنظیم کرد.

انتقال و ژست های UI

پلتفرم‌های موبایل مدت‌هاست که قلمرو حرکات متداول بوده است: کشیدن، سر خوردن، پرت کردن و موارد مشابه. این ژست‌ها معمولاً یک موضوع مشترک دارند: یک مؤلفه رابط کاربری قابل کشیدن، مانند «کشیدن برای تازه‌سازی» نمای فهرست یا نوار کناری که از سمت چپ صفحه ساخته می‌شود.

با Web Animations، یک جلوه مشابه در اینجا در وب - روی دسکتاپ یا تلفن همراه - بسیار آسان است. به عنوان مثال، هنگامی که یک حرکت کنترل کننده currentTime کامل می شود:

var steps = [ /* animation steps */ ];
var duration = 1000;
var player = target.animate(steps, duration);
player.pause();
configureStartMoveListeners(player);

var setpoints = [0, 500, 1000];
document.addEventListener('touchend', function(event) {
    var srcTime = player.currentTime;
    var dstTime = findNearest(setpoints, srcTime);
    var driftDuration = dstTime - srcTime;

    if (!driftDuration) {
    runCallback(dstTime);
    return;
    }

    var driftPlayer = target.animate(steps, {
    duration: duration,
    iterationStart: Math.min(srcTime, dstTime) / duration,
    iterations: Math.abs(driftDuration) / duration,
    playbackRate: Math.sign(driftDuration)
    });
    driftPlayer.onfinish = function() { runCallback(dstTime); };
    player.currentTime = dstTime;
});

این یک انیمیشن اضافی ایجاد می کند که یک "drift" را انجام می دهد. این بین جایی که ژست کامل شد، تا رسیدن به هدف خوب شناخته شده ما بازی می کند.

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

در نهایت، اگر بچه گربه‌ها را دوست دارید، یک برنامه وب آزمایشی وجود دارد که این حرکات را نشان می‌دهد. سازگار با موبایل است و از polyfill برای سازگاری با عقب استفاده می کند، بنابراین سعی کنید آن را در دستگاه تلفن همراه خود بارگیری کنید!

برو جلو و element.animate

روش element.animate در حال حاضر کاملاً تغییر می کند - چه از آن برای انیمیشن های ساده استفاده کنید یا از AnimationPlayer بازگشتی آن به روش های دیگر استفاده کنید.

این دو ویژگی همچنین در سایر مرورگرهای مدرن از طریق پلی فیل سبک به طور کامل پشتیبانی می شوند. این polyfill همچنین تشخیص ویژگی را انجام می دهد، بنابراین با اجرای این مشخصات توسط فروشندگان مرورگر، این ویژگی با گذشت زمان سریعتر و بهتر می شود.

مشخصات Web Animations نیز به تکامل خود ادامه خواهد داد. اگر به بازی کردن با ویژگی‌های آینده علاقه دارید، این ویژگی‌ها هم‌اکنون با جزئیات بیشتر در دسترس هستند: web-animations-next .