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 hareket ettirip işlem tamamlandığında geri çağırma işlevi kullanmayı hatırlatmak için bir örnek verilmiştir:

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. Önceden bir animasyon oluşturulduğunda yalnızca cancel() çağrısı yapabiliyor veya bitirme etkinliğini dinleyebiliyordunuz.

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 özelliğini 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. Bununla birlikte, bazı özel durumlar 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 sarmalama 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'yi silmek yerine, currentTime'si de ilerleme durumunu veya durumu göstermek için kullanılabilir. Örneğin, bir indirme işleminin durumunu göstermek için.

Buradaki yardımcı program, AnimationPlayer değerinin ayarlanmasına izin vermesi ve ilerleme görselleştirmesinin temel yerel uygulama tarafından halledilmesini sağlamasıdır. İndirme durumunda, bir animasyonun süresi toplam indirme boyutuna ayarlanabilir ve currentTime o anda indirilen boyuta (demo) ayarlanabilir.

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ünün "yenilemek için çekme" işlevi veya ekranın sol tarafından oluşturulan bir kenar çubuğu gibi sürüklenebilir kullanıcı arayüzü bileşeni.

Web Animasyonları sayesinde, web'de (masaüstü veya mobil) benzer bir efekti tekrarlamak ç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, "drift" gerçekleştiren ek bir animasyon oluşturur. Bu ses, hareketin tamamlandığı yerden bilinen iyi hedefimize kadar çalar.

Bu yöntem, animasyonların oluşturulma sıralarına bağlı olarak bir önceliğe sahip olduğundan çalışır: Bu durumda, driftPlayer, oynatıcıdan daha öncelikli olacaktır. driftPlayer tamamlandığında bu işlem ve etkileri kaybolur. Ancak nihai zamanı, temeldeki 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'i kullandığından mobil cihazınıza yüklemeyi deneyin.

İlerlemeye devam edin ve asset.animate'e geçin

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, hafif bir çoklu dolgu aracılığıyla diğer modern tarayıcılarda da tamamen 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.