Tuval odaklı arka plan resimleri

Arka plan resimlerine programatik olarak animasyon ekleme

Kullanıcıların arka plan resimlerine animasyon eklemek için kullandığı başlıca iki yöntem vardır:

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

İlki, resmi önceden yüklediyseniz oldukça işe yarar. Ancak, kaynağınızın örneğin bir <canvas> tarafından programatik olarak oluşturulması gerekiyorsa ne olur? 1 numaralı çö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'ler, elde edilen resme yaklaşık% 33 boyut ek yükü ekler.
2. Çok sayıda DOM dokunuyor (el.style).

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

2D kanvası arka plan olarak kullanma

WebKit'in yıllardır kullandığı, tuvali arka plan kaynağı olarak kullanabilen, standart dışı bir API olduğu ortaya çıktı. Maalesef bu özelliğin yayınlanmış bir spesifikasyonu yoktur.

İlk olarak, geri için bir URL belirtmek yerine:

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

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

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

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

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

Dave Hyatt'ten daha fazla bilgi:

Animasyonlar

Demoda görüldüğü gibi, animasyon oluşturmak için requestAnimationFrame() öğesini yeniden kullanabiliriz. Bu harika bir özelliktir, çünkü bir şeyler birbirine bağlandıktan sonra CSS ile tuval öğesi arasındaki ilişkilendirme korunur. DOM'yle uğraşmanıza gerek yoktur.

Chrome'da demo animasyonlu değil mi?

Chrome'un mevcut kararlı kanalı (sürüm 23) crbug.com/161699 adresine sahiptir. Bu durum, requestAnimationFrame() animasyonunun arka planı düzgün bir şekilde güncellemesini engeller. Bu sorun Chrome 25'te (şu anda Canary) düzeltildi. Demo da mevcut Safari'de iyi çalışacaktır.

Performans avantajları

Tuvalden bahsediyoruz. Donanım hızlandırmalı animasyonlar artık tam olarak devreye giriyor (en azından bu özelliğin çalıştığı tarayıcılarda). DOM'un JS'den kaldırılmasına gerek yoktur.

Arka plan olarak webgl kullanma

Bir saniye bekleyin. Bu, webgl kullanarak bir CSS arka planını destekleyebileceğimiz anlamına mı geliyor? Elbette istersiniz. WebGL yalnızca tuval için 3D bir bağlamdır. "2d" yerine "experimental-webgl" yazıp değiştirin.

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

Burada, köşe noktası ve parça gölgelendiricileri kullanılarak çizilmiş arka planıyla bir div içeren bir kavram kanıtlamasını görebilirsiniz: DEMO

Diğer yaklaşımlar

Mozilla'nın -moz-element() (MDN) uygulamasını uzun bir süredir kullandığını belirtmekte fayda var. Bu, CSS Resim Değerleri ve Değiştirilen İçerik Modülü Düzey 4 spesifikasyonunun bir parçasıdır ve rastgele HTML'den (videolar, kanvas, DOM içeriği vb.) oluşturulmuş bir resim oluşturmanıza olanak tanır. Ancak DOM'un anlık görüntülerine tam erişimle ilgili güvenlik sorunları mevcuttur. Diğer tarayıcıların söz konusu özelliği benimsememesinin birincil nedeni budur.