JS/jQuery - Воспроизведение GIF только один раз при зависании

Question

Недавно мы сделали анимацию GIF для нашего сайта. Одна из анимаций - это маркер на карте, который «прыгает» в воздухе. Наша идея состояла в том, чтобы маркер прыгал только один раз на мыши. Другими словами: он должен играть только один раз и не входить в бесконечный цикл при парях.

Я начал с чтения этого сообщения: Animating a gif on hover. Я использовал код, чтобы запустить анимацию при наведении и заменить ее статическим изображением на мыши.

Но это не приближает меня к тому, что я хочу. С помощью этого скрипта он продолжает играть в цикле, который является логическим, но именно того, чего мы не хотим. Кроме того, когда вы выходите мышь, мы хотим, чтобы GIF продолжал анимацию до тех пор, пока она не закончилась, и не сразу остановитесь. И последнее, но не менее важное: когда вы наводите курсор мыши, выведите мышь, а затем сразу же снова наведите указатель мыши во время анимации, он не должен перезапускаться, пока он все еще играет.

Как я понимаю, и что я не понимал, когда мы создаем анимацию, очень сложно управлять анимацией GIF с помощью jQuery.

Единственное, что я могу придумать, это работать со временем/продолжительностью анимации. Например. если анимация занимает 3 секунды, тогда мы могли бы заменить статическое изображение (при наведении) на GIF именно на такое количество времени. Мы могли бы даже написать универсальный скрипт для всех GIF, если мы передадим длительность в атрибуте данных в теге img. Но это будет означать написание большого количества кода, и это не похоже на самый простой способ для меня.

Есть ли у кого-нибудь идеи более простой способ достичь того, чего мы хотим? Я с нетерпением жду ваших слов об этом.

Answer 1

Когда вы создаете образ gif, вы можете создать его так, чтобы он пел только один раз.

Итак, чтобы решить эту проблему, сначала загрузите статическую версию файла. Когда вы наведете изображение, измените его на gif-образ и сохраните его таким образом, чтобы он мог просто закончить свою одноразовую анимацию.

Я бы не использовал никаких сроков. Точное время трудно предсказать, поскольку некоторые компьютеры работают медленнее, и время загрузки также должно учитываться.

Таким образом, решение:

• Сделайте рисунок, что петли только один раз (это атрибут, который может быть установлен в самом изображении, если у вас есть правильный инструмент).
• Сначала покажите статическую версию изображения.
• При наведении мыши добавьте класс к элементу, поэтому применяется другой стиль, изменение его на другое изображение или изменение атрибута src, если вы использовали элемент img.
• Оставьте эту ситуацию как есть. Не удаляйте класс вообще.
• Preload the image, поэтому нет никакой задержки при переключении src из статического изображения в анимированный gif.