Остановка анимации по клику

[annaboka]

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

[8Observer8]

Сначала нужно найти несколько картинок, которые являются кадрами анимации. Обычно такие картинки не делают отдельно, а представляют на одном рисунке. Называется такой рисунок с кадрами анимации - spritesheet или атлас.

К примеру:

bat.png

Теперь нужно найти способ, как выводить эти картинки на экран и по таймеру менять картинку на следующую.

Демка в песочнице

Следующим этапом будет клик по объекту и остановка его спрайтовой анимации. Это несложно сделать, если погуглите, как это делается на Pixi.js, найдутся примеры и документация.

[Naive]

Имхо, тут нужен простенький слайдер...

[annaboka]

Чудесные мышки!
Спасибо

[8Observer8]

Ещё один вариант - сделать на <canvas> с использованием библиотеки Phaser.

Смотрю по одному тутору, как делать свой простенький слайдер на <canvas>, чтобы потом делать игры или интерактивные графические приложения. Зацените, что получилось на данный момент. Стрелки и животные кликабельны. Причём, нужно попадать не по прямоугольнику рисунка, а именно на рисунок, по пикселям. Добавил звуки.

Демка в песочнице

farm-animals.zip

farm-animals.jpg

[Naive]

Нужна специальная библиотека, чтобы покадрово менять одну картинку на другую? О_о

[8Observer8]

Сообщение от Naive

Нужна специальная библиотека, чтобы покадрово менять одну картинку на другую? О_о

Объясню, почему лично я выбрал именно этот инструмент для решения данной задачи, а не вариант без библиотек или вариант с помощью библиотеки jQuery. Библиотека phaser.min.js весит копейки. Она оптимизирована для мобильных платформ. Легко решает данную задачу и имеет потенциальные возможности для работы с графикой и другие возможности, для создания более интересного интерактивного продукта. Часть возможностей я показал в примере выше. Лично я выбрал этот инструмент для решения этой задачи, чтобы повысить свой уровень знаний данного инструмента, и чтобы потренироваться на практике в его использовании. Эти навыки мне пригодятся для работы с графикой на <canvas> и для написания браузерных игр.

Я сделал ещё одну демку для тренировки с нуля, где выводятся несколько картинок с анимациями. Анимация останавливается при клике на пикселах картинок. Детектирование клика на пикселах картинки достигается всего одной строчкой кода:

animal.input.pixelPerfectClick = true;

Причём, некоторые картинки вращаются, а некоторые повёрнуты под углом.

Демка в песочнице

Так выглядит в vk: https://vk.com/app6408516

stop-animation-by-click.jpg