Михаил Ботов

Интерактивная анимация HTML5

Методические указания

Шрифты предоставлены компанией «ПараТайп»

© Михаил Ботов, 2017

Данная методичка раскрывает основные подходы к созданию интерактивных анимаций в рамках базового стека веб-технологий, опирающихся на стандарт HTML5. В частности рассмотрены: прямое манипулирование элементами DOM при помощи javascript, работа с тегами canvas и svg, в т. ч. с использованием SMIL.

0+

ISBN 978-5-4485-6305-8

Создано в интеллектуальной издательской системе Ridero

Оглавление

1. Интерактивная анимация HTML5
2. 1 Анимация с помощью функции setinterval
3. 2 Анимация на jquery
   1. 2.1 События
   2. 2.2 Функция animate
4. 3 canvas: рисование на холсте
   1. 3.1 Нанесение изображений при помощи родного API
   2. 3.2 Спрайт-анимация без сторонних библиотек
   3. 3.3 Библиотека Createjs
   4. 3.3.1 Работа с аудио
   5. 3.3.2 Цепочка анимаций
   6. 3.3.3 Связанные анимации нескольких объектов; движение по произвольной траектории
   7. 3.3.4 Определение столкновений
   8. 3.3.5 Управление с клавиатуры
5. 4 svg: векторная графика
   1. 4.1 Основные теги SVG
   2. 4.2 Базовые SMIL-анимации в SVG
   3. 4.3 Движение по произвольной траектории
   4. 4.4 Встраивание внешних SVG-файлов в страницу
   5. 4.5 Javascript библиотеки для работы с SVG

1 Анимация с помощью функции setinterval

Простую анимацию можно организовать при помощи функции setInterval (); Она циклически вызывает переданный ей метод через заданные интервалы времени до тех пор, пока не будет остановлена функцией clearInterval ();

Пример — смещение блока разметки вправо:

<script>

function move (elem) {

var left = 0; // начальное значение

function frame () {// функция для отрисовки

left++

elem.style. left = left + ’px’

if (left == 100) {

clearInterval (timer); // завершить анимацию

}

}

var timer = setInterval (frame, 100) // рисовать каждые 100мс

}

</script>

<div onclick="move(this.children [0])» class=«example_path»>

<div class=«example_block»> </div>

</div>

2 Анимация на jquery

2.1 События

Для реакции на действия пользователя и внутреннего взаимодействия элем

...