Tuval odaklı arka plan resimleri

Eric Bidelman

Arka plan resimlerine programatik olarak animasyon uygulama

Kullanıcıların arka plan resimlerini animasyonlu hale getirmenin iki temel yolu vardır:

1. JS'de background-position öğesini güncellemek için CSS sprite'lerini kullanın .
2. .toDataURL() ile Hacks

Resmi önceden hazırlıyorsanız ilk yöntem mükemmel bir şekilde çalışır. Ancak kaynağınızın programatik olarak oluşturulması (ör. bir <canvas> tarafından) gerekiyorsa ne olur? 1. sorunun çözümü, tuvalde .toDataURL() kullanmak ve arka planı oluşturulan URL'ye ayarlamaktır:

while(1) {
    var url = canvas.toDataURL('image/jpeg');
    el.style.background = 'url(' + url + ')';
}

Bununla ilgili iki sorun vardır:

1. data: URL'leri, oluşturulan resme yaklaşık% 33 boyut ek yük getirir.
2. Çok sayıda DOM dokunuşu (el.style).

Bu yöntemlerin ikisi de verimsizdir: Her zaman 60 fps'de sorunsuz çalışan bir web uygulaması için kabul edilemez.

Arka plan olarak 2D tuval kullanma

DEMO

WebKit'in yıllardır kullandığı, arka plan kaynağı olarak tuvali kullanabilen standart olmayan bir API olduğu ortaya çıktı. Maalesef bu özellik için yayınlanmış bir spesifikasyon bulunmuyor.

Öncelikle, geri için bir URL belirtmek yerine:

.bg {
    background: url(bg.png) no-repeat 50% 50%;
}

Tuval bağlamında bir dize tanımlayıcısına referans veren -webkit-canvas() kullanın:

.canvas-bg {
    background: -webkit-canvas(animation) no-repeat 50% 50%;
}

Ardından, .getContext()'ün özel bir sürümüyle 2D bağlamı oluşturmamız gerekir:

var ctx = document.getCSSCanvasContext('2d', 'animation', 300, 300);

Not: Bu yöntem tuvalde değil document nesnesindedir. İkinci bağımsız değişken, -webkit-canvas() içinde kullanılan adla aynıdır.

Dave Hyatt'tan daha fazla bilgi:

Not: Her belgede belirli bir global tanımlayıcı için yalnızca bir CSS kanvası vardır. Çizim bağlamını elde ettiğinizde boyutu da belirtirsiniz. Aynı boyutu tekrar tekrar istediğiniz sürece kanvas temizlenmez. Yeni bir boyut belirtmek, bir <canvas> öğesini yeniden boyutlandırdığınızda beklediğiniz davranışla eşdeğerdir. Bu nedenle, tuval arabelleği temizlenir.

Not: Aynı ada sahip bir CSS kanvası gözlemleyen tüm nesneler bu kanvası paylaşır. Bu, animasyonlu GIF'lerin işleyiş şekline benzer şekilde, animasyonlar oluşturabilir ve bunların tuvalin tüm istemcilerinde aynı anda gerçekleşmesini sağlayabilirsiniz. Çizim değişiklikleri tüm müşterilere otomatik olarak uygulanır.

Animasyonlar

Demoda görüldüğü gibi, animasyon oluşturmak için requestAnimationFrame() öğesini yeniden kullanabiliriz. Bu, bağlantı kurulduktan sonra CSS ile kanvas öğesi arasındaki ilişki korunduğundan çok kullanışlıdır. DOM'u kurcalamanıza gerek yoktur.

Chrome'da demo animasyonlu değil mi?

Chrome'un mevcut kararlı kanalında (23 sürümü) requestAnimationFrame() animasyonunun arka planı düzgün şekilde güncellemesini engelleyen crbug.com/161699 sorunu vardır. Bu sorun Chrome 25'te (şu anda Canary) düzeltildi. Demo, mevcut Safari'de de sorunsuz şekilde çalışmalıdır.

Performans avantajları

Burada kanvaslardan bahsediyoruz. Donanım hızlandırmalı animasyonlar artık tam olarak kullanılabiliyor (en azından bu özelliğin çalıştığı tarayıcılarda). Ayrıca, JS'den DOM'u rahatsız etmeye gerek olmadığını tekrar belirtmek isteriz.

Arka plan olarak WebGL kullanma

Bir saniye. Bu, webgl'yi kullanarak CSS arka planını destekleyebileceğimiz anlamına mı geliyor? Elbette. WebGL, kanvas için yalnızca bir 3D bağlamdır. "2d" yerine "experimental-webgl"i eklemeniz yeterlidir.

var gl = document.getCSSCanvasContext('experimental-webgl', 'animation', 300, 150);

Arka planı köşe ve parça gölgelendiricileri kullanılarak çizilen bir div içeren bir kavram kanıtı: DEMO

Diğer yaklaşımlar

Mozilla'nın -moz-element() (MDN) sitesine uzun süredir sahip olduğunu belirtmek isteriz. Bu özellik, CSS Resim Değerleri ve Değiştirilen İçerik Modülü 4. Seviye spesifikasyonunun bir parçasıdır ve istediğiniz HTML'den (ör. videolar, tuval, DOM içeriği) oluşturulan bir resim oluşturmanıza olanak tanır. Ancak DOM'un anlık görüntü resimlerine tam erişim sahibi olmakla ilgili güvenlik endişeleri vardır. Diğer tarayıcıların bu özelliği kullanmamasının başlıca nedeni budur.