контролировать время загрузки и воспроизведения анимированных картинок

Question

У меня есть слайд со многими анимированными гифками. Каждый слайд содержит анимированный GIF.

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

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

Есть ли способ контролировать время загрузки и воспроизведения анимированных картинок, когда они отображаются? это то, что нужно сделать в javascript или jQuery?

Answer 1

С моей точки зрения, CSS Sprites даст вам лучшую поддержку, которую вы хотели в своей анимации. Самое главное, что вам нужно, это контролировать анимацию.

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

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

В качестве справки вы можете увидеть Google Doodles, который активируется только при нажатии на них.

Для активных В качестве ссылки вы можете увидеть блог, который может вдохновить вас на использование CSS Спрайтов.

https://itnext.io/creating-css-animations-using-sprite-sheet-47e2b7a3793c

Опять же, это всего лишь мнение. Решения ваши, которые вы будете использовать для анимации.