Name: Интерактивная анимация HTML5
Author: Михаил Ботов

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

digital

https://store.ridero.ru/text-utils/v1/free-text/slug/interaktivnaya_animaciya_html5?volumeLimit=0.25

ridero

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

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

Пример — смещение блока разметки вправо:
Для реакции на действия пользователя и внутреннего взаимодействия элементов скриптов существует механизм событий.
Событие — это сигнал от браузера о том, что что-то произошло. Существует возможность определить реакцию скрипта на возникновение того или иного события, назначив ему функцию-обработчик. Данная функция (или функции, т. к. можно привязать несколько обработчиков к одному событию) будет вызываться всякий раз, когда нужное событие произойдет (например, пользователь кликнет по изображению). На вход функции обработчику передается специальный объект с информацией о произошедшем событии.


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

<div class="preview-fragment">1 Анимация с помощью функции setinterval
Простую анимацию можно организовать при помощи функции setInterval (); Она циклически вызывает переданный ей метод через заданные интервалы времени до тех пор, пока не будет остановлена функцией clearInterval ();

Пример — смещение блока разметки вправо:
&lt;script&gt;

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мс
}
&lt;/script&gt;

&lt;div onclick=&quot;move(this.children [0])» class=«example_path»&gt;
&lt;div class=«example_block»&gt; &lt;/div&gt;
&lt;/div&gt;
2 Анимация на jquery
2.1 События
Для реакции на действия пользователя и внутреннего взаимодействия элементов скриптов существует механизм событий.
Событие — это сигнал от браузера о том, что что-то произошло. Существует возможность определить реакцию скрипта на возникновение того или иного события, назначив ему функцию-обработчик. Данная функция (или функции, т. к. можно привязать несколько обработчиков к одному событию) будет вызываться всякий раз, когда нужное событие произойдет (например, пользователь кликнет по изображению). На вход функции обработчику передается специальный объект с информацией о произошедшем событии.
Существует много видов событий. Примеры функций библиотеки jQuery, позволяющие удобно привязывать обработчики к определенным событиям, показаны в приведенных ниже четырех таблицах.
<figure class="Figure"><img src="https://ridero.ru/books/interaktivnaya_animaciya_html5/image/59a99468538202b26835c7d3"/><figcaption>Базовые события</figcaption></figure>

<figure class="Figure"><img src="https://ridero.ru/books/interaktivnaya_animaciya_html5/image/59a9946f538202b26835c7dc"/><figcaption>События мыши</figcaption></figure>

<figure class="Figure"><img src="https://ridero.ru/books/interaktivnaya_animaciya_html5/image/59a9946d538202b26835c7d9"/><figcaption>События загрузки страницы</figcaption></figure>

<figure class="Figure"><img src="https://ridero.ru/books/interaktivnaya_animaciya_html5/image/59a9946a538202b26835c7d6"/><figcaption>События браузера</figcaption></figure>
Всплывание события и его остановка
Нужно сказать, что при наступлении события обработчики сначала срабатывают на самом вложенном элементе, затем на его родителе, затем выше и так далее, вверх по цепочке вложенности. Это называется всплыванием события.</div>

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

3 canvas: рисование на холсте

3.1 Нанесение изображений при помощи родного API

3.2 Спрайт-анимация без сторонних библиотек

3.3.3 Связанные анимации нескольких объектов; движение по произвольной траектории

3.3.4 Определение столкновений

3.3.5 Управление с клавиатуры

4 svg: векторная графика

4.2 Базовые SMIL-анимации в SVG

4.3 Движение по произвольной траектории

4.4 Встраивание внешних SVG-файлов в страницу

4.5 Javascript библиотеки для работы с SVG

https://store.ridero.ru/text-utils/v1/free-text/slug/interaktivnaya_animaciya_html5?volumeLimit=0.25&template=domFragment

Авторская орфография и пунктуация сохранены. Корректорская правка не проводилась.

Книга публикуется в авторской орфографии и пунктуации

Помощник в магазине Rideró

У этой книги нет оглавления

Купите книгу, чтобы продолжить чтение.

Бесплатный фрагмент закончился.

У этой книги нет бесплатного отрывка

Бесплатный фрагмент

Издай свою книгу

У этой книги ещё нет описания

О книге

книги автора

книги авторов

книги импринта

Аудиокнига

Электронная книга

Печатная книга

Автор

Авторы

Мы дарим вам эту книгу бесплатно, читайте с удовольствием, а Rideró начислит автору роялти.

Для этого подтвердите адрес электронной почты.

Получите книгу бесплатно

Начните обсуждать бесплатный фрагмент прямо сейчас и получите электронную версию бесплатно, оставив отзыв длиной не менее 200 символов. 
 Автор при этом получит роялти, как при обычной продаже.

{countAuthors, plural, =0 {} one {Автор {authorName}, } other {{authorName} {isOther, select, true {и другие авторы} other {}} - }}книга {title}{subtitle} {countFormats, plural, =0 { } other {в }}{isPaper, select, true {печатном} other {}}{countFormats, plural, =0 {} one {} other {, }}{isDigital, select, true {электронном} other {}}{countFormats, plural, =3 {, } other {}}{isAudio, select, true {аудио} other {}} {countFormats, plural, =0 {} other {формате }}в интернет магазине Ridero

Читайте онлайн оглавление книги {title}{subtitle}{countAuthors, plural, =0 {} one {, автор {authorName}} other {, авторы: {authorName} {isOther, select, true {и другие} other {}}}}

Читайте бесплатно книгу {title}{subtitle}{countAuthors, plural, =0 {} one {, автор {authorName}} other {, авторы: {authorName} {isOther, select, true {и другие} other {}}}}

{title} - купить книгу в интернет магазине{countAuthors, select, 1 {, автор {authorName}} other {}} Ridero

, автор {authorName}

*Facebook признан экстремистской организацией и запрещен в РФ

'<'a class="ga_feed_anchor" target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Мы проверили вашу книгу и готовы отправить ее в магазины. Проверьте, пожалуйста, почту {userEmail}, чтобы заключить договор.

'<'a class="ga_feed_anchor" target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Ой! Кажется, ваша книга нарушает закон РФ, и мы не можем ее опубликовать. Проверьте почту {userEmail}, чтобы узнать подробности.

'<'a class="ga_feed_anchor" target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Ваша книга поступила в отдел публикации. Проверка книги может занять от 1 до 3 рабочих дней

'<'a class="ga_feed_anchor" target="_blank" href="https://ridero.ru/books/{engTitle}"'>'{objectName}'<'/a'>'{period} Ваша книга добавлена в акцию «{discountDescription}», которая продлится с {discountStart} до {discountEnd}. Расскажите об акции своим друзьям и читателям, чтобы они ее не пропустили.

'<'a class="ga_feed_anchor" target="_blank" href="https://ridero.ru/books/{engTitle}/#freebiePrint"'>'{objectName}'<'/a'>'{period} {formattedDate} Ура, товарищ! Мы тебе почти за свой счёт готовы напечатать 1 экземпляр новой книги!

'<'a class="ga_feed_anchor" target="_blank" href="https://ridero.ru/books/{engTitle}"'>'{objectName}'<'/a'>'{period} {formattedDate} вашу книгу скачали {cnt} раз. Хотите больше? Узнайте, как привести больше '<'a target=_blank href="https://beta.ridero.ru/book/share.html#!/{objectId}/"'>'новых читателей'<'/a'>'.

'<'a class="ga_feed_anchor" target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Аннотация для книги готова

'<'a class="ga_feed_anchor" target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Аудиокнига готова

'<'a class="ga_feed_anchor" target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Буктрейлер для книги готов

'<'a class="ga_feed_anchor" target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Обложка книги готова

'<'a class="ga_feed_anchor" target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Редактор завершил работу над книгой

'<'a class="ga_feed_anchor" target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Иллюстрации для книги готовы

Услуга "консультация юриста" оказана

'<'a class="ga_feed_anchor" target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Помощник завершил работу над книгой

'<'a class="ga_feed_anchor" target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Отрисовка схем и элементов для книги завершена

'<'a class="ga_feed_anchor" target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Завершёна услуга "Ridero POD"

'<'a class="ga_feed_anchor" target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Рекламная кампания книги закончена

'<'a class="ga_feed_anchor" target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Последняя версия книги опубликована

'<'a class="ga_feed_anchor" target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Работы по заказу №{number} завершены

'<'a class="ga_feed_anchor" target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Корректура книги готова

'<'a class="ga_feed_anchor" target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Верстка книги готова

'<'a class="ga_feed_anchor" target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Завершена услуга "набор текста" для книги

Мы получили от вас оплату по счету №{number}'<'/i'>' и скоро напишем в почту {userEmail}, чтобы обсудить детали

Мы получили от вас оплату по счету №'<'i'>'{number}'<'/i'>' и скоро напишем в почту {userEmail}, чтобы обсудить детали

'<'a class="ga_feed_anchor" target="_blank" href="{bookLink}"'>'{objectName}'<'/a'>'{period} Мы проверили вашу книгу и опубликовали ее в магазине Rideró. Скоро она будет опубликована и в других магазинах, которые вы выбрали. Проверьте, пожалуйста, почту {userEmail}, чтобы узнать подробности

'<'a class="ga_feed_anchor" target="_blank" href="https://ridero.ru/books/{engTitle}"'>'{objectName}'<'/a'>'{period} {formattedDate} Поздравляем! Вашу книгу кто-то только что добавил в избранное! Узнайте, как еще больше '<'a target=_blank href="https://beta.ridero.ru/book/share.html#!/{objectId}/"'>'привлечь внимание читателей'<'/a'>'.

'<'a class="ga_feed_anchor" target="_blank" href="https://ridero.ru/books/{engTitle}"'>'{objectName}'<'/a'>'{period} Нам понравилась ваша книга, и мы добавили ее в тематическую подборку '<'a target="_blank" href="https://ridero.ru/listing/{annotation_id}"'>'{annotation_displayname}'<'/a'>' в магазине Rideró.

'<'a class="ga_feed_anchor" target="_blank" href="https://ridero.ru/books/{engTitle}"'>'{objectName}'<'/a'>'{period} {formattedDate} для старта продаж мы включили книгу “{objectName}” в специальную подборку. Ваши первые читатели получат электронную версию совершенно бесплатно, а Rideró начислит вам роялти. '<'br/'>' Не забудьте отправить ссылку на книгу друзьям или поделиться ей в соцсетях

'<'a class="ga_feed_anchor" target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Тираж вашей книги по заказу '<'i'>'{number}'<'/i'>' готов и передан в службу доставки

Мы получили от вас оплату по счету №'<'i'>'{number}'<'/i'>' и скоро напишем в почту {userEmail}, чтобы обсудить детали

'<'a class="ga_feed_anchor" target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Читатель оформляет покупку вашей книги в электронном формате

'<'a class="ga_feed_anchor" target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Читатель оформляет покупку вашей книги в бумажном виде

'<'a target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Только что кто-то купил вашу аудиокнигу. '<'a target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/stat"'>'Проверьте статистику!'<'/a'>'

'<'a target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Поздравляем, ваша аудиокнига куплена по акции «{discountDescription}». '<'a target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/stat"'>'Проверьте статистику!'<'/a'>'

'<'a target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Поздравляем! Только что куплена электронная копия вашей книги. '<'a target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/stat"'>'Проверьте статистику!'<'/a'>'

'<'a target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Поздравляем, ваша книга куплена по акции «{discountDescription}». '<'a target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/stat"'>'Проверьте статистику!'<'/a'>'

'<'a target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/view"'>'{objectName}'<'/a'>'{period} Поздравляем! Только что кто-то купил вашу книгу в бумажном виде. '<'a target="_blank" href="https://beta.ridero.ru/#!/book/{objectId}/stat"'>'Проверьте статистику!'<'/a'>'

'<'a class="ga_feed_anchor" target="_blank" href="https://ridero.ru/books/{engTitle}"'>'{objectName}'<'/a'>'{period} {formattedDate} бесплатный фрагмент вашей книги {cnt, plural, one {прочитал} other {прочитали}} {cnt} {cnt, plural, one {человек} two {человека} few {человека} many {человек} other {человек}}. '<'a target=_blank href="https://beta.ridero.ru/book/share.html#!/{objectId}/"'>'Привлекайте новых читателей'<'/a'>'

Вы дочитываете книгу '<'a class="ga_feed_anchor" target="_blank" href="https://ridero.ru/books/{engTitle}"'>'{objectName}'<'/a'>'{period}. Надеемся, она вам понравилась. Пожалуйста, поделитесь впечатлениями на '<'a class="ga_feed_anchor" target="_blank" href="https://ridero.ru/books/{engTitle}"'>'странице книги'<'/a'>'. Это очень важно для автора.

'<'a class="ga_feed_anchor" target="_blank" href="https://ridero.ru/books/{engTitle}"'>'{objectName}'<'/a'>'{period} {formattedDate} {cnt} {cnt, plural, one {человек} two {человека} few {человека} many {человек} other {человек}} {cnt, plural, one {начал} other {начали}} читать вашу книгу, купленную в приложении Ridero Store чуть раньше

'<'a class="ga_feed_anchor" target="_blank" href="https://ridero.ru/books/{engTitle}"'>'{objectName}'<'/a'>'{period} У вашей книги появился новый отзыв на Ридеро! '<'a class="ga_feed_anchor" target="_blank" href="https://ridero.ru/books/{engTitle}"'>'Перейти на сайт книги'<'/a'>'.

Спасибо за отзыв о книге '<'a class="ga_feed_anchor" target="_blank" href="https://ridero.ru/books/{engTitle}"'>'{objectName}'<'/a'>'{period}! Поделитесь им в соц. сетях, чтобы рассказать о своих о впечатлениях друзьям и знакомым!

'<'a class="ga_feed_anchor" target="_blank" href="https://ridero.ru/books/{engTitle}"'>'{objectName}'<'/a'>'{period} Кто-то оставил отзыв о вашей книге. Интересно, что там написано? '<'a class="ga_feed_anchor" target="_blank" href="https://ridero.ru/books/{engTitle}"'>'Перейти на сайт книги'<'/a'>'

Кто-то ответил на ваш отзыв к книге '<'a class="ga_feed_anchor" target="_blank" href="https://ridero.ru/books/{engTitle}"'>'{objectName}'<'/a'>'. Примите участие в обсуждении.

'<'a class="ga_feed_anchor" target="_blank" href="https://ridero.ru/books/{engTitle}"'>'{objectName}'<'/a'>'{period} Нам понравилась ваша книга, и мы добавили ее в подборку «{annotation_displayname}» на '<'a target="_blank" href="https://ridero.ru/books"'>'главной странице магазина Rideró'<'/a'>'

При загрузке книги '<'b'>'«{bookTitle}»'<'/b'>' произошла ошибка. Свяжитесь с техподдержкой, и мы поможем вам загрузить книгу в систему.

'<'a class="ga_feed_anchor" target="_blank" href="https://beta.ridero.ru/#!/book/{bookId}/view"'>'{bookTitle}'<'/a'>'{period} Поздравляем! Мы распознали вашу рукопись и сделали из нее книгу. Отправьте ее в магазины или закажите тираж.

'<'a class="ga_feed_anchor" target="_blank" href="https://ridero.ru/books/{engTitle}"'>'{objectName}'<'/a'>'{period} {formattedDate} страницу вашей книги {cnt, plural, one { посмотрел} other { посмотрели}} {cnt} {cnt, plural, one {человек} two {человека} few {человека} many {человек} other {человек}}. '<'a target=_blank href="https://beta.ridero.ru/book/share.html#!/{objectId}/"'>'Продвигайте книгу'<'/a'>' с нами

Заявка '<'b'>'{number}'<'/b'>' на вывод средств принята. В ближайшее время с вами свяжется наш менеджер

Заявка '<'b'>'{number}'<'/b'>' на вывод средств отклонена. Причина: '<'i'>'{rejectionReason}'<'/i'>'

На книгу '<'a class="ga_feed_anchor" target="_blank" href="https://ridero.ru/books/{engTitle}"'>'{objectName}'<'/a'>' из вашего «Избранного» действует скидка {discountAmt}% до {discountEnd}. Самое время ее купить!

Плюсы Rideró, ISBN в подарок, буктрейлеры, вебинары и многое другое

Если вы считаете, что информация на этой странице нарушает закон, сообщите нам

Сообщите о нарушении

Отзывы

Нельзя публиковать ссылки в отзывах

Только зарегистрированные пользователи могут оставлять отзывы. <button>Зарегистрироваться</button>

Если вы хотите поставить книге оценку 1 или 2, пожалуйста, расскажите, что конкретно вам не понравилось в книге, напишите текстовый отзыв из 200 знаков

Оглавление - Интерактивная анимация HTML5

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