Какой подход к созданию полноэкранной анимации белого шума в браузере будет более производительным?

Приветствую. Всех с наступающим!

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

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

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

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

При анимации слоя с шумом и изменении фонового градиента (через css3) наблюдается большая потеря производительности (например в FF подтормаживает. В chrome более-менее нормально ) - имеет ли смысл комбинировать css3 и js анимацию - либо лучше что-то одно?
Без изменения градиента - все выглядит более менее шустро.
Как повысить производительность этой многослойной анимации?
Какие моменты надо иметь ввиду, для более грамотного и красивого решения этой задачи?
Спасибо.
  • Вопрос задан
  • 3124 просмотра
Пригласить эксперта
Ответы на вопрос 3
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
тайловый gif )
Ответ написан
deemytch
@deemytch
linux root, ruby/perl programmer, sql, backend.
Как бы я сделал генерацию подобного видео например, в AfterEFfects, сверху вниз:
3. слой с градиентом
2. слой с полосами
1. слой с шумом
0. исходное изображение
Самое ресурсоёмкое - шум с прозрачностью, там много вычислений при генерировании и много данных для распаковки при показе. Но, можно зациклить от 3 до 5 кадров и никто ничего не заметит.
То есть предложение такое - шум посчитать в GIF (видео с прозрачностью, да на всё окно я не знаю, можно ли показать), а остальное - рисовать средствами js.
Ответ написан
Keyten
@Keyten
Если бы просто белый шум, то здесь явно проход по пикселям и Math.random ).
А полосы можно сверху наложить и анимировать каким-нибудь CSS.

А ещё можете поиграться с принципом цикады, вдруг выйдет что. Чередование наложенных друг на друга картинок, думаю, съест меньше всего ресурсов.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы