Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.88/25: Рейтинг темы: голосов - 25, средняя оценка - 4.88
8 / 8 / 2
Регистрация: 31.01.2014
Сообщений: 472

Как сделать управляемое проигрывание анимации gif?

14.02.2019, 12:43. Показов 5195. Ответов 5
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Как сделать управляемое проигрывание анимации gif?

Если конкретнее, есть div с gif, хочется при наведении на другой div запускать у первого проигрывание анимации и что бы после проигрыша оно замирало. Если юзер уберёт мышь с элемента, то анимация должна проиграться назад с кадра, на котором сейчас проигрываться, а после замереть.
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
14.02.2019, 12:43
Ответы с готовыми решениями:

Проигрывание анимации до полного цикла
Подскажите, как сделать анимацию так, что бы она не перезапускалась с начала пока не завершит полный цикл? @keyframes circle { ...

Плавное проигрывание анимации при скроллинге вниз на чистом JS
Народ, разработал Landing Page, сделал под каждый элемент разнообразные анимации, дело в том, что их проигрывание начинается сразу после...

Проигрывание анимации на странице, лишь тогда когда пользователь видит элемент
Добрый день друзья, задался вопросом: как сделать проигрывание анимации на странице, лишь тогда когда пользователь видит элемент, при...

5
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
14.02.2019, 14:27
Цитата Сообщение от Gvizl Посмотреть сообщение
анимация должна проиграться назад
анимация ничего никому не должна -- способов управлять ею не существует
0
8 / 8 / 2
Регистрация: 31.01.2014
Сообщений: 472
16.02.2019, 12:04  [ТС]
Потрачено XD

Ну, тем не менее, нашёл спрайтовый способ
https://codepen.io/zjun/pen/dGPqzQ
Мб потом отполирую для полного управления проигрыванием
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
17.02.2019, 10:40
Цитата Сообщение от Gvizl Посмотреть сообщение
тем не менее, нашёл спрайтовый способ
путаете gif-анимацию с css-анимацией, а это "две большие разницы"

вот это - gif-анимация, ею управлять не получится, если таковых на странице несколько штук, они все сами синхронизируются, присмотритесь:
0
8 / 8 / 2
Регистрация: 31.01.2014
Сообщений: 472
17.02.2019, 12:50  [ТС]
kalabuni, я не так выразился, мне хотелось в целом сделать управляемую анимацию, необязательно gif изображения. Вот вариант бека как спрайта мне понравился.
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
17.02.2019, 13:49
Цитата Сообщение от Gvizl Посмотреть сообщение
я не так выразился
бывает

удачи!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
17.02.2019, 13:49
Помогаю со студенческими работами здесь

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

Запуск анимации gif при клике на нее
Подскажите, как сделать так, чтобы анимационная картинка включалась/выключалась по клику? Например, есть человек, который стоит (формат...

Проигрывание анимации в timage(gif)
Добрый день, кто нибудь может подсказать, как теперь проиграть gif в timage, раньше в vcl все было элементарно. Или как на худой конец...

Как сделать прозрачный фон GIF анимации без белого контура
Добрый день! При изготовлении GIF анимации и уменьшения до размера 32 на 34 края анимации белого цвета что совсем изменяет внешний вид...

Сделать стопкадр в Gif-анимации
Вот такая небольшая задачка: У меня есть гиф изображение я его программно загружаю в pictorybox. Мне надо, чтобы например при нажатии на...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Новые блоги и статьи
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++
8Observer8 10.03.2026
Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE
8Observer8 10.03.2026
Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки
Neotwalker 08.03.2026
Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages
DevAlt 07.03.2026
Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F#
DevAlt 06.03.2026
В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .
Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование
8Observer8 05.03.2026
Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D
8Observer8 04.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий
8Observer8 02.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru