Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.12.2014, 05:55
Аватар для Stas404
Новичок на форуме
Отправить личное сообщение для Stas404 Посмотреть профиль Найти все сообщения от Stas404
 
Регистрация: 28.12.2014
Сообщений: 1

Полноэкранная анимация белого шума в браузере - какой подход производительнее?
Приветствую. Всех с наступающим!

Задача:
Создать реалистичную полноэкранную анимацию а-ля помехи в телевизоре с возможностью подкладывать под нее различный контент.

Компоненты анимации:
- белый шум (хаотические мельтешения)
- горизонтальные полосы (движущиеся вертикально с разной скоростью, высотой и прозрачностью)
- фон с градиентом (от серого к более темному, со временем степень затемнения градиента скачкообразно и циклично меняется).

Возможные подходы к решению:
1) Циклическая покадровая генерация шума, полос и фона с отрисовкой на полноэкранном canvas (возможно, использование 3-х элементов canvas с послойно разделенной анимацией).
2) Анимация заранее созданных картинок (либо однократная генерация отдельных png-изображений с шумом и полосами) в элементах DOM, путем изменения background-position.
3) Использовать для анимации css3 (возможно, в комбинации со вторым вариантом).
4) Использовать для анимации SVG (с имеющимися фильтрами и т.д. удобствами).

Примечания:
Предполагается, что слой (или слои) с анимацией будут иметь полупрозрачность, для того чтобы был виден контент под анимацией, что и создает основную нагрузку на браузер.

При анимации слоя с шумом и изменении фонового градиента (через css3) наблюдается большая потеря производительности (например в FF подтормаживает. В chrome более-менее нормально ) - имеет ли смысл комбинировать css3 и js анимацию - либо лучше что-то одно?
Без изменения градиента - все выглядит более менее шустро.
Как повысить производительность этой многослойной анимации?
Какие моменты надо иметь ввиду, для более грамотного и красивого решения этой задачи?
Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 28.12.2014, 10:53
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,199

Юзать гифки.) Генерация слишком затратна и не имеет смысла если вам не нужен "истинно рандомный" шум. А он не нужен.
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 28.12.2014, 12:18
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,932

Aetae, +
Делал такое похожее во флеш, просто ставил два-три кадра шума и быстро воспроизводил их по очереди.
Ответить с цитированием
  #4 (permalink)  
Старый 28.12.2014, 12:39
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,932

Вот, сделал небольшой пример с использованием одного бесшовного *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кб.

Последний раз редактировалось ruslan_mart, 28.12.2014 в 12:44.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Всплытие событий или что то не так... Кирюха =) jQuery 6 30.03.2013 10:56