Chrome 39'da web animasyonları oynatma kontrolü

Deniz Tolga
Sam Thorogood

Bu yılın başlarında Chrome 36, daha geniş Web Animasyonları spesifikasyonunun bir parçası olarak element.animate yöntemini kullanıma sundu. Bu da geliştiricilere zorunlu olarak yazılmış animasyonları oluşturmak için en uygun seçeneği sunarak daha etkili ve yerel animasyonlar yapmalarına olanak tanıyor.

Bilgilerinizi kısaca tazelemek için, işlem tamamlandığında geri arama yaparak bir bulutu ekranda nasıl animasyon haline getirebileceğ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 son derece kolay bir işlemdir ve animasyonları veya geçişleri zorunlu olarak oluştururken araç kutunuzun bir parçası olarak dikkate değer. 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ğırabilir veya bitiş etkinliğini dinleyebilirsiniz.

Oynatmaya eklenen bu eklemeler, Web Animasyonlarının yapabileceklerine ilişkin olasılıkları ortaya çıkarır.Animasyonları, animasyonlar için geçişler konusunda kuralcı olmak yerine genel amaçlı bir araca dönüştürür. veya önceden tanımlanmış animasyonlar.

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

Bulut tıklandığında 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);
}

reverse() yöntemini de çağırabilirsiniz. Bu yöntem, normalde mevcut playbackRate değerinin tersine çevrilmesine (-1 ile çarpılması) eşdeğerdir. Bununla birlikte, birkaç özel durum söz konusudur:

  • reverse() yönteminin neden olduğu değişiklik, çalışan animasyonun etkili bir şekilde sona ermesine neden olursa currentTime de ters çevrilir; ör. yepyeni bir animasyon ters çevrilmişse tüm animasyon geriye doğru oynatılır

  • Oynatıcı duraklatılırsa 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 harici olarak (kullanıcı etkileşimi yoluyla) kontrol edilmesine olanak tanır. Bu işlem genellikle ovalama olarak adlandırılır.

Örneğin, HTML sayfanız gökyüzünü temsil ediyorsa ve o anda oynatılan bir bulutun konumunu değiştirmek için sürükleme hareketi yapmak istiyorsanız dokümana birkaç işleyici 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;
});

Siz dokümanın üzerinde sürüklerken currentTime, orijinal etkinliğinize uzaklığı yansıtacak şekilde değişir. Hareket sona erdiğinde animasyonu oynatmaya da devam etmek isteyebilirsiniz:

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

Bu, farenin sayfadan nereye kaldırıldığına bağlı olarak geri alma davranışıyla bile birleştirilebilir (birleşik demo).

Kullanıcı etkileşimine yanıt olarak AnimationPlayer'yi ileri geri oynatmak yerine, ilerlemeyi veya durumu (örneğin, bir indirme işleminin durumunu göstermek) için cihazın currentTime işlevi de kullanılabilir.

Buradaki yardımcı olan, AnimationPlayer bir değerin ayarlanmasına izin vermesi ve ilerleme görselleştirmesini temel yerel uygulamanın halletmesini sağlamasıdır. İndirme durumunda animasyonun süresi toplam indirme boyutuna, currentTime değeri ise şu anda indirilen boyuta (demo) ayarlanabilir.

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

Mobil platformlar uzun zamandır sürükleme, kaydırma, hızla kaydırma ve benzeri hareketlerin kullanıldığı alan haline geldi. Bu hareketlerin genellikle ortak bir teması vardır: liste görünümünün "yenilemek için çek" gibi sürüklenebilir bir kullanıcı arayüzü bileşeni veya ekranın sol tarafından oluşturulan bir kenar çubuğu.

Web Animasyonları'nda da benzer bir efektin burada web'de, masaüstünde veya mobilde kopyalanması çok kolaydır. Örneğin, currentTime öğesini 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, "kayma" gerçekleştiren ek bir animasyon oluşturur. Bu değer, hareketin tamamlandığı yerden, bilinen iyi hedefimize kadar devam eder.

Bu şekilde, animasyonların oluşturulma sırasına göre önceliği vardır. Bu durumda driftPlayer, oynatıcıya göre öncelikli olur. driftPlayer tamamlandığında uygulama ve efektleri kaybolur. Ancak kullanıcının son zamanı, temel oynatıcının currentTime zamanıyla eşleşir. Böylece kullanıcı arayüzünüz tutarlı kalır.

Son olarak, yavru kedileri seviyorsanız bu hareketleri gösteren bir demo web uygulaması vardır. Bu uygulama mobil uyumlu ve geriye dönük uyumluluk için çoklu dolguyu kullanıyor. Bu nedenle, uygulamayı mobil cihazınıza yüklemeyi deneyin!

Yukarı git ve element.animate

İster basit animasyonlar için kullanın ister döndürülen AnimationPlayer yöntemini başka şekillerde kullanın, element.animate yöntemi şu anda inanılmaz başarılar elde ediyor.

Bu iki özellik, hafif bir çoklu dolgu aracılığıyla diğer modern tarayıcılarda da tam olarak desteklenir. Bu çoklu dolgu, özellik algılama da gerçekleştirdiğinden tarayıcı tedarikçileri spesifikasyonu uyguladıkça bu özellik zamanla daha hızlı ve daha iyi hale gelir.

Web Animasyonları spesifikasyonu da gelişmeye devam edecektir. Yeni özellikleri denemek isterseniz bu özellikleri artık daha ayrıntılı bir çoklu dolgu: web-animations-next üzerinden de kullanabilirsiniz.