Tuval odaklı arka plan resimleri

Arka plan resimlerini programatik olarak animasyonlandırma

Kullanıcıların arka plan resimlerini canlandırmak için kullandığı iki temel yöntem vardır:

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

Birinci yöntem, resmi önceden hazırladıysanız çok iyi sonuç verir. Ancak kaynağınızın programatik olarak oluşturulması gerekiyorsa (ör. <canvas> tarafından) ne yapmalısınız? 1. sorunun çözümü, tuvalde .toDataURL() simgesini kullanıp arka planı oluşturulan URL olarak ayarlamaktır:

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

Bu durumun iki sorunu vardır:

  1. data: URL'ler, sonuçta elde edilen resme yaklaşık% 33 boyut ekler.
  2. Çok fazla DOM dokunma işlemi (el.style).

Bu yöntemlerin ikisi de verimsizdir ve her zaman akıcı bir şekilde 60 FPS'de çalışan bir web uygulaması için kabul edilemez.

Arka plan olarak 2D tuval kullanma

Arka plan olarak tuval demosu
DEMO

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

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

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

-webkit-canvas() kullanarak bir tuval bağlamına dize tanımlayıcısı referansı verin:

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

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

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

Dave Hyatt'tan daha fazla bilgi:

Animasyonlar

Demoda gösterildiği gibi, animasyon oluşturmak için requestAnimationFrame() öğesini yeniden kullanabiliriz. Bu harika bir özellik çünkü öğeler bağlandıktan sonra CSS ile tuval öğesi arasındaki ilişki korunur. DOM ile uğraşmanı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 var. Bu sorun Chrome 25'te (şu anda Canary) düzeltildi. Demo, mevcut Safari sürümünde de sorunsuz çalışır.

Performans avantajları

Burada tuvalden bahsediyoruz. Donanım hızlandırmalı animasyonlar artık tamamen kullanılabilir (en azından bu özelliğin çalıştığı tarayıcılarda). Tekrar belirtmek gerekirse, JS'den DOM'u değiştirmeye gerek yoktur.

Arka plan olarak WebGL kullanma

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

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

Arka planı köşe ve parça gölgelendiriciler kullanılarak çizilmiş bir div içeren kavram kanıtını burada bulabilirsiniz: DEMO

Diğer yaklaşımlar

Mozilla'nın uzun süredir -moz-element() (MDN) adlı bir web sitesi olduğunu belirtmek isteriz. Bu, CSS Image Values and Replaced Content Module Level 4 spesifikasyonunun bir parçasıdır ve rastgele HTML'den oluşturulan bir resim oluşturmanıza olanak tanır: videolar, tuval, DOM içeriği vb. Ancak DOM'un anlık görüntü resimlerine tam erişimin olması güvenlik açısından endişe vericidir. Diğer tarayıcıların bu özelliği kullanmamasının temel nedeni budur.