JavaScript для управления анимацией изображения?

Question

Мне бы хотелось, чтобы на странице был анимированный персонаж с разными анимациями для разных типов поведения. В настоящее время у меня есть две идеи о том, как это может работать:

ИДЕЯ 1: каждое поведение должно быть анимированным GIF и использовать JavaScript для переключения файлов GIF при переключении поведения. Вверху: анимации находятся в самом изображении, оставляя меньше работы для JS. Недостаток: нет способа (который я знаю) для JavaScript, чтобы сказать, в каком кадре находится GIF, когда анимация заканчивается / повторяется и т. Д.

ИДЕЯ 2: каждый кадр каждой анимации должен быть изображением в формате PNG и использовать JS для переключения между кадрами, с некоторым предварительным загрузчиком, чтобы убедиться, что все изображения готовы до начала анимации. Вверху: гораздо больше контроля над последовательностью анимации. Недостаток: множество кадров ...

Какая из этих двух идей была бы лучше? (Кстати, я бы хотел не использовать Flash для этого)
Я склоняюсь к идее 2 для лучшего контроля, который она предлагает. Поскольку на сайте уже есть таймер, запускаемый каждые 50 мсек, добавление этой анимации в эту систему таймера было бы небольшим.

Answer 1

Я знаю, что это старый, но я бы дал вариант 3, который похож на вариант 2 с изюминкой.

Вместо загрузки кадров вам нужно загрузить большую карту спрайтов со всеми кадрами и, возможно, карту всех анимаций + координат. Вы бы использовали спрайт в качестве фона для div, используя правильное измерение. Вам просто нужно переместить фоновое изображение в правильный кадр.

Вы можете иметь все события в другой строке, а каждый кадр анимации - в другом столбце. Это создаст сетку, которой вы можете легко управлять.

Plus

• Хороший контроль над анимацией и кадрами
• Вероятно, быстрее, чем загрузка или переключение между изображениями
• Вам не нужно создавать несколько подключений к серверу для загрузки всех анимаций
• Png дает вам лучший альфа-результат, чем GIF

минус

• Вы должны справиться со всеми анимациями самостоятельно

Answer 2

Для идеи 1 вы можете использовать метод setTimeOut() для запуска события по истечении времени, которое GIF занимает для цикла.Проблема с этим, однако, заключается в том, что GIF может начинаться в другое время по сравнению с javascript.

Лично я бы пошел на идею 2;пока кадры относительно малы, клиент будет загружать все изображения довольно быстро (PNG размером 16x16 пикселей составляет ~ 500 байт).Клиентский компьютер не будет иметь проблем с перемещением кадров.

Другой идеей было бы поместить все кадры друг под другом в одно длинное изображение и использовать CSS и jQuery (или ванильный JavaScript) для изменения свойства CSS background-position каждые 50 мс.Это будет означать меньшее изображение и, возможно, немного меньше кодирования.

Answer 3

Идея 1 не будет работать, так как JavaScript не может контролировать текущий кадр анимированного GIF-файла - ни через браузеры, ни с помощью какого-либо определенного (специфичного для ActiveX / Mozilla) расширения, о котором я знаю.

Я думаю, что вы остались с идеей 2. Я не знаю, насколько гладкими являются результаты, которых вы можете достичь с помощью этого метода, - вам придется протестировать.

Answer 4

Возможно, вы захотите взглянуть на freezeframe.js .Он использует элемент canvas для извлечения первого кадра из GIF с целью его приостановки.