Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 10.03.2018, 10:01   #1
annaboka
Новичок
Джуниор
 
Регистрация: 10.03.2018
Сообщений: 2
По умолчанию Остановка анимации по клику

Добрый день!
Пишу диплом по граф дизайну и пришлось столкнуться в программированием, хотя полный ноль в этом.
Нужно сделать анимацию - зацикленная смена нескольких картинок (по сути gif). По клику на определенную картинку анимация останавливается на этой картинке и раскрывается дополнительная текстовая информация. По повторному клику запускается заново. И так для каждой из картинок.
Господа разработчики, помогите плииииз!
annaboka вне форума Ответить с цитированием
Старый 10.03.2018, 19:48   #2
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

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

К примеру:

bat.png

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

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

Следующим этапом будет клик по объекту и остановка его спрайтовой анимации. Это несложно сделать, если погуглите, как это делается на Pixi.js, найдутся примеры и документация.
8Observer8 вне форума Ответить с цитированием
Старый 11.03.2018, 03:32   #3
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Имхо, тут нужен простенький слайдер...
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 11.03.2018, 20:06   #4
annaboka
Новичок
Джуниор
 
Регистрация: 10.03.2018
Сообщений: 2
По умолчанию

Чудесные мышки!
Спасибо
annaboka вне форума Ответить с цитированием
Старый 11.03.2018, 22:39   #5
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

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

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

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

farm-animals.zip

farm-animals.jpg

Последний раз редактировалось 8Observer8; 12.03.2018 в 12:30. Причина: Добавил звуки
8Observer8 вне форума Ответить с цитированием
Старый 13.03.2018, 23:33   #6
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Нужна специальная библиотека, чтобы покадрово менять одну картинку на другую? О_о
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 14.03.2018, 14:10   #7
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

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

Я сделал ещё одну демку для тренировки с нуля, где выводятся несколько картинок с анимациями. Анимация останавливается при клике на пикселах картинок. Детектирование клика на пикселах картинки достигается всего одной строчкой кода:
Код:
animal.input.pixelPerfectClick = true;
Причём, некоторые картинки вращаются, а некоторые повёрнуты под углом.

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

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

stop-animation-by-click.jpg

Последний раз редактировалось 8Observer8; 14.03.2018 в 14:26.
8Observer8 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
остановка экрана c# alwgel Помощь студентам 1 04.03.2015 21:30
остановка цикла Emperator12 Общие вопросы Delphi 2 06.10.2012 12:49
Остановка потоков по ID steelforce Общие вопросы Delphi 2 24.01.2010 16:50
Остановка выполнения Artanis Общие вопросы C/C++ 1 20.12.2009 18:13
Остановка Memo Sanek777 Общие вопросы Delphi 1 11.09.2008 15:50