Анимация фона веб-приложения

Посмотрим на два способа сделать фон с анимацией :

1. Использовать спрайты CSS или js
2. Хаки с помощью .toDataURL()


Первый способ хорошо работает, если у вас есть заранее готовое изображение. Но есть способ сделать фон с анимацией с помощью HTML5 <canvas>. Вот как использовать метод .toDataURL() canvas что подключить фон для генерируемого URL:



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


Но это не всё, есть две проблемы:

  1. data для адреса добавит вес, примерно на 33% для конечного изображения.
  2. Много скриптов DOM.

Оба эти метода, неэффективны и не подходят, для плавного изменения изображения 60 кадров в секунду.

Использование 2d canvas, для фона

Демо
Использование canvas, для фона

Использование canvas для фона сайта

Существует не стандартный API, который работает уже несколько лет с WebKit , и который может взять canvas как источник для фона.

Так в чем разница? А вот в чём, вместо то го что бы, указывать URL для фона в стилях таким способом:



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


можно использовать -webkit-canvas(), ссылаясь на идентификатор строки canvas контекста, вот так:



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


Дальше, нам нужно создать 2D контекст специальную версию .getContext() , создаём:



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


этот метод для объекта документа, а не для canvas. Второй аргумент — это имя, используемое в -webkit-canvas() .

Дальше комментирую слова Dave Hyatt :

Существует только один CSS canvas для данного глобального идентификатора в документе. Когда вы получаете контекст рисунка, необходимо также указать его размер. Canvas не будет очищен, пока вы не укажите тот же размер. Указав новый размер эквивалентен поведению которое вы ожидаете, если вы изменяете размер элементов <canvas>, тогда буфер canvas очищается.

Все объекты, соблюдают CSS canvas с аналогичным названием обмена, что и canvas. Это похоже, на то как работают анимированные GIF-файлы, вы можете сделать анимацию с ними синхронно для всех canvas. Изменения рисунка будут переименованы автоматически.

Анимации

В демо видно, что мы можем использовать requestAnimationFrame() для управления анимацией.
Это здорово, потому что, когда всё подключено, связь между CSS и элементами canvas сохраняется. Не нужно возиться с DOM.

Вопрос: Почему демо не работает в Chrome?

Chrome 23 блокирует анимации requestAnimationFrame() с обновлением фона. Это было исправлено в Chrome 25. Демо также должно хорошо работать в текущей версии Safari.

Преимущества

Аппаратное ускорение анимации теперь полностью работает (по крайней мере в браузерах). Остаётся только повторить, не нужно использовать JS.

Использование WebGL в качестве фона

WebGL является лишь 3d контекст для canvas. Просто заменить в «experimental-webgl» вместо «2d».



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


Вот концепция, которая содержит div с его фоном, созданы с помощью vertext и пиксельных шейдеров .
Демо

Анимация фона SVG

Демонстрация использования фильтр SVG как градиент в качестве фона для страницы HTML.

В заключение

Стоит отметить, что у Mozilla есть элемент -moz-element() ( MDN ) и уже давно. Это часть CSS, изображения и заменены уровня содержания 4-го уровня спецификации и позволяет создавать изображения, с генерированные из произвольного HTML: video, canvas, DOM content. Но, есть и проблемы безопасности, имея полный доступ к изображению DOM.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>