Chrome 39'da web animasyonları oynatma kontrolü

Sam Thorogood

Bu yılın başlarında, Chrome 36, daha geniş kapsamlı Web Animasyonları spesifikasyonunun bir parçası olarak element.animate yöntemini kullanmaya başladı. Bu sayede verimli ve yerel animasyonlar zorunlu şekilde yazılarak geliştiricilere animasyonlarını ve geçişlerini kendileri için en uygun yaklaşımla oluşturma seçeneği sunuldu.

Bilgilerinizi tazelemek için, tamamlandığında geri çağırma ile bir bulutu ekran boyunca nasıl canlandırabileceğiniz aşağıda 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 tek başına oldukça kolaydır ve zorunlu olarak animasyonlar veya geçişler oluştururken aletinizin bir parçası olarak dikkate değer bir şeydir. 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 yapabileceklerinin önünü açıyor: Geçişler konusunda kuralcı olmak yerine, animasyonları genel amaçlı bir araca dönüştürüyor. "sabit" veya önceden tanımlanmış animasyonlar.

Oynatma hızını duraklatma, geri sarma veya değiştirme

Bulut tıklandıysa animasyonu duraklatmak için yukarıdaki örneği 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);
}

Normalde mevcut playbackRate değerini ters çevirmeye (-1 ile çarpma) eşdeğer olan reverse() yöntemini de çağırabilirsiniz. Bununla birlikte, 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 de ters çevrilmiş olur.Örneğin, yepyeni bir animasyon tersine çevrildiğinde animasyonun tamamı geriye doğru oynatılır.

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

Oynatıcıyı ileri geri oynatma

AnimationPlayer artık bir animasyon çalışırken currentTime öğesinin değiştirilmesine izin veriyor. Normalde bu değer zaman içinde artar (veya playbackRate negatifse azalır). Bu, animasyonun konumunun (ör. kullanıcı etkileşimi aracılığıyla) dışarıdan kontrol edilmesine olanak tanıyabilir. Bu işlem genellikle eleme olarak adlandırılır.

Örneğin, HTML sayfanız gökyüzünü temsil ediyorsa ve oynatılan bir bulutun konumunu değiştirmek için bir 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 üzerinde sürüklerken currentTime, orijinal etkinliğinizden uzaklığı yansıtacak şekilde değiştirilir. Ayrıca, hareket sona erdiğinde animasyonu oynatmaya devam etmek de isteyebilirsiniz:

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

Bu, farenin sayfadan nerede kaldırıldığına bağlı olarak tersine çevirme davranışıyla bile birleştirilebilir (birleşik demo).

Kullanıcı etkileşimine yanıt olarak AnimationPlayer öğesini ileri geri oynatmak yerine ilerlemeyi veya durumu (ör. indirme işleminin durumunu) göstermek için kullanılan currentTime öğesi de kullanılabilir.

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, animasyonun süresi toplam indirme boyutuna ayarlanabilir ve currentTime o anda indirilen boyuta (demo) ayarlanabilir.

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

Sürükleme, kaydırma, hızla kaydırma ve benzeri hareketler mobil platformlarda uzun süredir yaygın olarak kullanılıyor. 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" işlemi gerçekleştiren ek bir animasyon oluşturur. Bu, hareketin tamamlandığı yerden bilinen iyi hedefimize kadar devam eder.

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. Bununla birlikte, son zamanı temel oynatıcının currentTime ile aynı olacağından kullanıcı arayüzünüz tutarlı olacaktır.

Son olarak, kedi yavrularını seviyorsanız bu hareketlerin gösterildiği bir web demo uygulaması vardır. 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

İster basit animasyonlar için kullanıyor ister onun döndürdüğü AnimationPlayer değerini başka şekillerde kullanıyor olun, element.animate yöntemi şu anda mükemmel bir deneyimdir.

Bu iki özellik, hafif bir çoklu dolgu aracılığıyla diğer modern tarayıcılarda da tamamen desteklenir. Bu çoklu dolgu, özellik algılaması da gerçekleştirir. Böylece, tarayıcı satıcıları spesifikasyonu uyguladıkça bu özellik zaman içinde daha hızlı ve iyi olacaktır.

Web Animasyonları spesifikasyonu da gelişmeye devam edecek. Yakında çıkacak olan özelliklerle ilgili değişiklikler yapmak isterseniz bu özelliklere daha ayrıntılı polyfill: web-animations-next ile de erişebilirsiniz.