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