Полноэкранная анимация белого шума в браузере - какой подход производительнее?
Приветствую. Всех с наступающим!
Задача: Создать реалистичную полноэкранную анимацию а-ля помехи в телевизоре с возможностью подкладывать под нее различный контент. Компоненты анимации: - белый шум (хаотические мельтешения) - горизонтальные полосы (движущиеся вертикально с разной скоростью, высотой и прозрачностью) - фон с градиентом (от серого к более темному, со временем степень затемнения градиента скачкообразно и циклично меняется). Возможные подходы к решению: 1) Циклическая покадровая генерация шума, полос и фона с отрисовкой на полноэкранном canvas (возможно, использование 3-х элементов canvas с послойно разделенной анимацией). 2) Анимация заранее созданных картинок (либо однократная генерация отдельных png-изображений с шумом и полосами) в элементах DOM, путем изменения background-position. 3) Использовать для анимации css3 (возможно, в комбинации со вторым вариантом). 4) Использовать для анимации SVG (с имеющимися фильтрами и т.д. удобствами). Примечания: Предполагается, что слой (или слои) с анимацией будут иметь полупрозрачность, для того чтобы был виден контент под анимацией, что и создает основную нагрузку на браузер. При анимации слоя с шумом и изменении фонового градиента (через css3) наблюдается большая потеря производительности (например в FF подтормаживает. В chrome более-менее нормально ) - имеет ли смысл комбинировать css3 и js анимацию - либо лучше что-то одно? Без изменения градиента - все выглядит более менее шустро. Как повысить производительность этой многослойной анимации? Какие моменты надо иметь ввиду, для более грамотного и красивого решения этой задачи? Спасибо. |
Юзать гифки.) Генерация слишком затратна и не имеет смысла если вам не нужен "истинно рандомный" шум. А он не нужен.
|
Aetae, +
Делал такое похожее во флеш, просто ставил два-три кадра шума и быстро воспроизводил их по очереди. |
Вот, сделал небольшой пример с использованием одного бесшовного *png изображения:
http://learn.javascript.ru/play/4qNur
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.noise {
background: url('http://learn.javascript.ru/files/play/54/9f/549fdabb5db7c.png');
height: 480px;
width: 640px;
}
</style>
</head>
<body>
<div class="noise"></div>
<script type="text/javascript">
(function() {
var getRandom = function(max) {
return Math.floor(Math.random() * ++max);
},
noise = document.querySelector('.noise'),
noiseStyle = noise.style;
setInterval(function() {
noiseStyle.backgroundPosition = getRandom(200) + 'px ' + getRandom(200) + 'px';
}, 30);
})();
</script>
</body>
</html>
В данном примере меняется стиль background-position со случайными значениям от 0 до 200 (т.к. размер текстуры 200x200). Частоту кадров можно изменить с помощью второго аргумента setInterval. Вроде вполне хорошо смотрится, и вес текстуры всего 5кб. :) |
| Часовой пояс GMT +3, время: 08:20. |