Chrome 39'da web animasyonları oynatma kontrolü

Sam Thorogood

Bu yılın başlarında, daha kapsamlı Web Animasyonları spesifikasyonunun bir parçası olarak Chrome 36'ya element.animate yöntemi eklendi. Bu yöntem, zorunlu olarak yazılan verimli ve yerel animasyonlar sağlar. Böylece geliştiriciler, animasyonlarını ve geçişlerini kendileri için en uygun yaklaşımla oluşturma seçeneğine sahip olur.

Aşağıda, ekranda bir bulutu animasyonlu olarak nasıl hareket ettireceğiniz ve işlem tamamlandığında geri çağırma işlevi nasıl kullanacağınız kısaca açıklanmıştır:

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);
};

Bu işlem tek başına inanılmaz derecede kolaydır ve animasyon veya geçişler oluştururken araç kutunuzun bir parçası olarak değerlendirilmeye değerdir. Ancak Chrome 39'da, element.animate tarafından döndürülen AnimationPlayer nesnesine oynatma kontrolü özellikleri eklendi. Daha önce, bir animasyon oluşturulduktan sonra yalnızca cancel() çağrısı yapabilir veya bitiş etkinliğini dinleyebilirdiniz.

Bu oynatma eklemeleri, Web Animasyonlarının yapabileceklerini genişletiyor.Animasyonları geçişler hakkında kuralcı olmaktan çıkarıp genel amaçlı bir araca dönüştürüyor. "Sabit" veya önceden tanımlanmış animasyonlar.

Duraklatma, geri alma veya oynatma hızını değiştirme

Yukarıdaki örneği, bulut tıklandığında animasyonu duraklatacak şekilde güncelleyerek başlayalım:

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

playbackRate mülkünü de değiştirebilirsiniz:

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

reverse() yöntemini de çağırabilirsiniz. Bu yöntem normalde mevcut playbackRate değerini tersine çevirmeye (-1 ile çarpmaya) eşdeğerdir. Ancak birkaç özel durum vardır:

• reverse() yönteminin neden olduğu değişiklik, çalışan animasyonun etkili bir şekilde sona ermesine neden olursa currentTime da tersine çevrilir.Örneğin, yeni bir animasyon tersine çevrilirse animasyon tamamıyla geriye doğru oynatılır.

• Oynatıcı duraklatılmışsa animasyon oynatılmaya başlar.

Oynatıcıyı ileri geri oynatma

AnimationPlayer, animasyon çalışırken currentTime öğesinin değiştirilmesine olanak tanır. Normalde bu değer zaman içinde artar (veya playbackRate negatifse azalır). Bu, bir animasyonun konumunun harici olarak (ör. kullanıcı etkileşimi aracılığıyla) kontrol edilmesine olanak tanıyabilir. Buna genellikle sarma denir.

Örneğin, HTML sayfanız gökyüzünü temsil ediyorsa ve şu anda oynatılan bir bulutun konumunu değiştirmek için sürükleme hareketi kullanmak istiyorsanız dokümana bazı işleyiciler ekleyebilirsiniz:

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;
});

Dokümanı sürüklerken currentTime, orijinal etkinliğinize olan mesafeyi yansıtacak şekilde değiştirilir. Hareket sona erdiğinde animasyonun oynatılmasını devam ettirmek isteyebilirsiniz:

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

Farenin sayfadan kaldırıldığı yere bağlı olarak bu işlem, geri alma davranışıyla da birleştirilebilir (birleştirilmiş demo).

Kullanıcı etkileşimine yanıt olarak bir AnimationPlayer'ü silmek yerine, currentTime'ü ilerleme durumunu veya durumu göstermek için de kullanabilirsiniz. Örneğin, bir indirme işleminin durumunu göstermek için.

Buradaki fayda, AnimationPlayer'ün bir değerin ayarlanmasına ve temel yerel uygulamanın ilerleme durumunun görselleştirilmesini sağlamasına olanak tanımasıdır. İndirme durumunda, animasyon süresinin toplam indirme boyutuna, currentTime değerinin ise şu anda indirilen boyuta (demo) ayarlanması mümkündür.

Kullanıcı arayüzü geçişleri ve hareketleri

Mobil platformlar uzun zamandır sürükleme, kaydırma, fırlatma ve benzeri yaygın hareketlerin alanı olmuştur. Bu hareketlerin ortak bir teması vardır: liste görünümündeki "yenilemek için sürükle" gibi sürüklenebilir bir kullanıcı arayüzü bileşeni veya ekranın sol tarafından açılan bir kenar çubuğu.

Web animasyonları sayesinde, web'de (masaüstü veya mobil) benzer bir efekti kopyalamak çok kolaydır. Örneğin, currentTime'ü kontrol eden bir hareket tamamlandığında:

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;
});

Bu işlem, "kayma" gerçekleştiren ek bir animasyon oluşturur. Bu ses, hareketin tamamlandığı yerden bilinen iyi hedefimize kadar oynatılır.

Animasyonlar, oluşturulma sıralarına göre öncelik aldığından bu yöntem işe yarar. Bu durumda driftPlayer, oyuncudan öncelikli olur. driftPlayer tamamlandığında, kendisi ve etkileri kaybolur. Ancak nihai zamanı, temel oyuncunun currentTime değeriyle eşleşeceğinden kullanıcı arayüzünüz tutarlı kalır.

Son olarak, yavru kedileri seviyorsanız bu hareketleri gösteren bir demo web uygulaması mevcuttur. Mobil uyumludur ve geriye dönük uyumluluk için polyfill kullanır. Bu nedenle, mobil cihazınızda yüklemeyi deneyin.

element.animate işlevini kullanmaya başlayın

element.animate yöntemi, basit animasyonlar için kullanıp kullanmadığınıza veya döndürülen AnimationPlayer'ten başka şekillerde yararlanıp yararlanmadığınıza bakılmaksızın şu anda çok popüler.

Bu iki özellik, diğer modern tarayıcılarda da hafif bir polyfill aracılığıyla tam olarak desteklenir. Bu polyfill, özellik algılama işlemi de gerçekleştirir. Bu nedenle, tarayıcı tedarikçileri spesifikasyonu uyguladıkça bu özellik zaman içinde daha da hızlı ve daha iyi hale gelecektir.

Web animasyonları spesifikasyonu da gelişmeye devam edecek. Yakında kullanıma sunulacak özellikleri denemek istiyorsanız bu özellikler daha ayrıntılı bir polyfill'de (web-animations-next) de kullanılabilir.