التحكّم في تشغيل الصور المتحركة على الويب في Chrome 39

Sam Thorogood

في وقت سابق من هذا العام، طرح Chrome 36 طريقة إنشاء الصور المتحركة داخل التطبيق كجزء من مواصفات 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()" أو الاستماع إلى حدث الانتهاء.

وتفتح إضافات التشغيل هذه إمكانات لما يمكن أن تفعله "الرسوم المتحركة على الويب"، وهي تحويل الصور المتحركة إلى أداة للأغراض العامة بدلاً من أن تكون توجيهية بشأن الانتقالات، أي الرسوم المتحركة "الثابتة" أو المحددة مسبقًا.

الإيقاف المؤقت أو الترجيع أو تغيير معدل التشغيل

لنبدأ بتحديث المثال أعلاه لإيقاف الرسم المتحرك مؤقتًا في حال النقر على السحابة:

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 على الحجم الذي تم تنزيله حاليًا (إصدار تجريبي).

انتقالات وإيماءات واجهة المستخدم

لطالما كانت منصات الهواتف الجوّالة عالمًا من الإيماءات الشائعة: السحب والانزلاق والانتقال السريع وما شابه. تميل هذه الإيماءات إلى أن يكون لها موضوع مشترك: عنصر واجهة مستخدم قابل للسحب، مثل "السحب للتحديث" في عرض القائمة أو إنشاء شريط جانبي من الجانب الأيسر من الشاشة.

وباستخدام "الصور المتحركة على الويب"، يسهل تكرار هذا التأثير نفسه هنا على الويب، سواء على الكمبيوتر المكتبي أو على الأجهزة الجوّالة. على سبيل المثال، عند اكتمال إيماءة تتحكّم في 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;
});

ويؤدي هذا إلى إنشاء رسم متحرك إضافي يؤدي "انحراف". تبدأ هذه المدة بين الجزء الذي اكتملت فيه الإيماءة وحتى الهدف الجيد المعروف.

ويتم ذلك لأنّ الأولوية للصور المتحركة استنادًا إلى ترتيب إنشائها: في هذه الحالة، ستكون الأولوية للرمز driftPlayer عن المشغّل. عند اكتمال driftPlayer، ستختفي هذه الميزة وتأثيراتها. ومع ذلك، سيتطابق وقته النهائي مع الوقت الحالي للمشغّل الأساسي، لذلك ستظل واجهة المستخدم متسقة.

وأخيرًا، إذا كنت تحب القطط الصغيرة، يتوفّر تطبيق ويب تجريبي يعرض هذه الإيماءات. فهو متوافق مع الأجهزة الجوّالة ويستخدم رمز polyfill لتحقيق التوافق مع الأنظمة القديمة، لذا حاوِل تحميله على جهازك الجوّال.

انتقل وitem.animate

إنّ الطريقة element.animate مذهلة في الوقت الحالي، سواء كنت تستخدمها لإنشاء صور متحركة بسيطة، أم تستفيد منها AnimationPlayer التي تم عرضها بطرق أخرى.

وتتم أيضًا إتاحة هاتَين الميزتَين بالكامل في المتصفّحات الحديثة الأخرى عبر رمز polyfill خفيف. وتنفِّذ سمة polyfill هذه أيضًا اكتشاف الميزات، لذلك عندما يطبّق مورّدو المتصفّح المواصفات، ستصبح هذه الميزة أسرع وأفضل بمرور الوقت.

سنواصل أيضًا تطوير مواصفات Web Animations. إذا كنت مهتمًا بالتعرّف على الميزات القادمة، فهي متاحة الآن أيضًا في ملف polyfill أكثر تفصيلاً: web-animations-next.