Tv gibi görünmek animasyon tuval gürültü
Gürültü görünümü veren bu eleman tuval ve boyalar rastgele temsil etmek değerler oluşturur; bir fonksiyonu generateNoise()
adında var.
Benim Sorum
Sonsuz için en iyi yol olacağını gürültü hareket ediyor görüntüsü vermek için animasyon. Daha fazla hayat olabilir ki?
function generateNoise(opacity) {
if(!!!document.createElement('canvas').getContext) {
return false;
}
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
x,y,
r,g,b,
opacity = opacity || .2;
canvas.width = 55;
canvas.height = 55;
for (x = 0; x < canvas.width; x ){
for (y = 0; y < canvas.height; y ){
r = Math.floor(Math.random() * 255);
g = Math.floor(Math.random() * 255);
b = Math.floor(Math.random() * 255);
ctx.fillStyle = 'rgba(' r ',' b ',' g ',' opacity ')';
ctx.fillRect(x,y,1,1);
}
}
document.body.style.backgroundImage = "url(" canvas.toDataURL("image/png") ")";
}
generateNoise(.8);
CEVAP
Eğer gürültü animasyon uygulamak istiyorsanız, o zaman bunu yapmanın etkili bir yol olması gerekir. Kod sundu bu çok pahalı ve muhtemelen kaynakları tarayıcıda mevcut en tüketecektir.
Burada gürültü hızlı 32-bit kullanarak yapmak için bir yol dizi tampon yazılan:
Güncelleme 2
(Ayrıca Bkzthis variantsabit bir boyut tuval ve ölçekler belki de daha gerçekçi bir görünüm verir hatta ve hatta daha hızlı çalışabilir penceresine sığdırmak için, içeriği) kullanır.
Bunu daha hızlı yapmak gerekir createImageData()
ben tamamen unutmuşum..) ile getImageData()
yerini aldı.
Live demo
function noise(ctx) {
var w = ctx.canvas.width,
h = ctx.canvas.height,
idata = ctx.createImageData(w, h), // create image data
buffer32 = new Uint32Array(idata.data.buffer), // get 32-bit buffer
len = buffer32.length,
i = 0;
for(; i < len;)
buffer32[i ] = ((255 * Math.random())|0) << 24; // alter alpha channel
ctx.putImageData(idata, 0, 0);
}
Güncelleme 4
Küçük bir çimdik daha hızlı yerine bu hattı kullanarak yapmak için:
for(; i < len; i )
if (Math.random() < 0.5) buffer32[i] = 0xff000000;
Sen requestAnimationFrame
kullanarak döngü şimdi:
(function loop() {
noise(ctx);
requestAnimationFrame(loop);
})();
Buyapınbazı CSS gerektirir:
#canvas {
background:#777; /* or white */
}
Gürültü yöntemi alfa kanalı değiştirerek çalışır. Siyah piksel (değer geri kalanı 0 değeri her bir bileşen için) tuval varsayılan olarak piksel değişken alfa değeri beyaz arka plan daha fazla veya daha az göstermek zorunda kalacak.
Uint32Array
sadece orijinal 8-bit buffer (bellek arabellekleri 8-bit) için bir başvuru kullanır ama JavaScript daha kısa sürede bir dizin Yukarı bakmak geçirmek için izin verir.
Güncelleme 3
İşte eski TV açık: kötü resepsiyon parazit/gürültü öykünen bir türevi
Demo
Güncelleme
Performans (ref. yorum) - burada 8-bit arabellek () kenetlenmiş ve 32-bit bir yineleme üzerinde test jsperf test (uınt32 olmayan kelepçeli).
Test yineleme aynı sayıda olması nedeniyle test-Yukarı Bak mal JavaScript bir dizin Yukarı bakmak harcamak gerekir ne () daha fazla veya daha az ölçmek. Bu tuval, tarayıcı motor, donanım vb boyutuna bağlı olarak değişebilir. yani sadece test gösterici olarak kullanın.
Nasıl 'yürüyen karıncalar' gi...
CSS3 Sürekli Döndürmek Animasyon (gibi...
Liste görünümü öğesi kaydırma animasyo...
Nasıl CSS ile bir ön gibi görünmek içi...
Nasıl tuval içindeki animasyon çerçeve...