Предыдущий ролик Следующий ролик  

Видео урок: Базовая анимация

HTML5: графика и анимация с Canvas

Работа с HTML5 canvas может привлечь вас и потому, что вы можете создавать такие вещи, как анимацию. В этом ролике мы рассмотрим, как использовать canvas и некоторую JavaScript логику, чтобы создать базовую анимацию. Давайте я покажу вам, как это работает. Здесь у меня есть canvas голубого цвета с прямоугольником, и на данный момент это квадрат, он желтого цвета с красным обрамлением, и квадрат перемещается слева направо в canvas. А когда он исчезает из вида, затем он снова появляется.

Давайте посмотрим, как это создать. Я открываю начальную версию, а сейчас мы посмотрим на код из snippets. Для создания простой анимации мы копируем первые несколько строк, которые все инициализируют, и вставляем их вот сюда. То есть, здесь у меня есть некоторая логика инициализации. Для прямоугольника у меня есть несколько переменных. Значение Y будет 200, ширина - 40, а позиция X равна начальному значению rectWidth, но я снизил его до -40.

И вот когда прямоугольник впервые нарисован на экране, он показан полностью. Давайте снова вернемся к snippets. Копируем здесь функцию инициализации. Копируем эти строки. В функции инициализации мы получаем ссылку на canvas и его контекст, а затем мы вызываем функцию blank. Функция blank рисует задний фон, и сейчас мы ее скопируем. Затем у нас идет логика, которая рисует прямоугольник. fillStyle настроен у нас на yellow, и мы заполняем прямоугольник желтым цветом.

Давайте теперь скопируем вот это. То есть, мы копируем функцию blank. Вы видите, что blank просто заполняет canvas. Вы видите, что здесь у меня приятный голубой цвет, и им заполняется canvas по ширине и высоте с верхнего левого угла. И, кстати, обратите внимание, что я использую встроенные свойства canvas, например, ширину и высоту, а не использую жестко закодированные значения, находящиеся в документе.

Поэтому если я захочу изменить высоту canvas или внести другие изменения, я могу сделать все это в одном месте, и тогда мой код автоматически подхватит различия. Мне не нужно думать о том, чтобы менять числа где-то еще, кроме как в одном месте. То есть, мы рисуем задний фон canvas, а затем прямоугольник. Давайте вернемся и скопируем еще немного кода. Это функция, создающая анимацию. Теперь давайте скопируем это.

Вот функция для анимации, и мы установили интервал на каждые 30 миллисекунд, что является 30ой долей секунды, чтобы вызвать функцию anim, которая находится вот здесь. То есть, эта функция будет вызываться каждые 30 миллисекунд, а также мы проверяем, является ли X позиция прямоугольника меньше, чем ширина canvas, и если это так, тогда мы рисуем чистый задний фон, мы перемещаем прямоугольник на пять пикселей, а затем снова его заполняем.

Заполняем его желтым цветом, обрамляем красным, а lineWidth равна 3, и вот мы заполняем и обрамляем прямоугольник. Если прямоугольник переместился за ширину canvas, если позиция X и Y больше, чем ширина, а в данном случае это позиция Х, мы тогда сбрасываем rectWidth на отрицательное значение, и это снова разместит прямоугольник на экран. Мы устанавливаем отрицательную ширину, потому что мы хотим, чтобы позиция X была отправлена влево, так чтобы ни один из прямоугольников не косил сильно влево по canvas.

Резюмируя, у нас есть логика инициализации. Первое, что мы делаем при помощи функции инициализации, это рисуем чистый задний фон, устанавливаем первоначальный прямоугольник, а затем начинаем анимацию. Функция blank просто заполняет задний фон, а затем проходя по циклу, мы рисуем задний фон и прямоугольник. И каждый раз, как мы рисуем прямоугольник, мы перемещаемся на пять пикселей. Эффект, который видит пользователь, поскольку все происходит очень быстро, заключается в том, что был нарисован задний фон, который рисуется по прямоугольнику. Мы перемещаем прямоугольник на пять пикселей и снова его заполняем.

Пример анимации, который я показываю здесь, называется одиночной буферизацией, а причина этого названия заключается в том, что анимация происходит напрямую в canvas, находящимся на странице. Нет никакого буфера, где мы что-то рисуем и копируем в canvas. Давайте запустим это в браузере, сохраняем, запускаем. И вы видите, что прямоугольник перемещается по экрану. Это происходит очень быстро, но задний фон рисуется каждый раз. Прямоугольник перемещается, а затем рисуется в новом месте.

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