Анімація засобами html5

Кожна анімація складається з набору найпростіших кадрів. Для того, щоб відобразити на полотні один кадр необхідно:

  1. Очистити полотно. Це можна зробити, наприклад, за допомогою методу clearRect ().
  2. Якщо ви хочете, щоб початковий стан полотна завжди зберігалося, навіть якщо ви змінюєте параметри кольору та т.д. то необхідно зберегти стан полотна.
  3. Намалювати об'єкти анімації, фактично цей етап і є створення кадру.
  4. Якщо ви зберігали сотсояние полотна, то необхідно його завантажити, перш ніж починати створення нового кадру.

анімація руху

Розглянемо приклад. Створимо найпростішу анімацію руху - рухається горизонтально прямокутник. Створимо функцію animation (). яка рекурсивно викликаючи саму себе створить кадри руху прямокутника.

В рамках функції animation () здійснюється наступна послідовність дій:

  1. Очищення полотна.
  2. Отрісовка закрашеного квадрата.
  3. Зміна координати лівого верхнього кута квадрата по - горизонталі, для "зміщення" квадрата на наступному кроці.
  4. У разі, якщо наш квадрат дійде до краю полотна, то початкове значення координати x повернеться до нуля.
  5. Рекурсивний виклик animation (). за допомогою методу setTimeout.

Створимо функцію CreateImage () для демонстрації цієї анімації:

Анімація без очищення екрана

Розглянемо ще один приклад. В даному випадку ми не будемо очищати екран кожен раз при промальовуванні нового кадру, таким чином вийде, що зображення буде плавно "вимальовуватися". Особливо вдало це можна використовувати при створенні ділової або статистичної графіки, наприклад, побудуємо дві функції.

Створимо функцію, яка буде плавно промальовувати два графіка в режимі реального часу.

Результат представлений нижче:

анімація спрайтів

Для створення складних анімацій, а також ігор та інших веб-додатків на основі HTML5 необхідно создавть анімації за допомогою спрайтів. Спрайт - це файл зображення, який зберігає в собі набір проміжних кадрів. Тобто на одному зображенні міститься вся розкадровка анімації або станів об'єкта.

Елемент . як уже було розказано в попередній статті підтримує роботу із зовнішніми зображеннями, які можна вставляти на полотно. Таким чином, можна вставити спрайт-зображення і закриваючи непотрібну частину створити ілюзію безперервної анімації.

Як джерело анімації будемо використовувати наступний спрайт:

Для виведення кадрів спрайту будемо використовувати метод контексту

Створимо функцію для "пожвавлення" цього спрайту:

Це тільки невелика демонстрація можливостей HTML5 Canvas. Ця технологія має широкий спектр застосування: від створення ділової графіки до повнорозмірних і масштабних браузерних ігор.

Схожі статті