December 13, 2022

Как объединить две гифки в одну

По-настоящему, а не наложением друг на друга на веб-страничке )

Изучала вопрос на предмет способов сделать это побыстрее —  мануалы-обсуждения на форумах удивили: ответы варьируют от «никак» до предложений освоить Pro-версии видеоредакторов. Кто-то видеозахватом перегоняет html в AVI и обратно в GIF.
Да не может быть, чтоб не нашлось нормального метода!

Самое простое напрашивается — декомпилировать анимированный файл на слои тем же FastStone (просмотрщик и мини-фоторедактор). Переименовать и склеить послойно  пакетным способом.  (Это если одна из гифок прозрачная, иначе всяко на каждом слое придется фон убирать фотошопом).

Уж если такая программулинка справится, должен и на ФШ быть штатный способ.

И он есть!

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

Разобралась методом тыка, запишу себе на память и френдам в копилочку:

На пробу взяла два файлика, из тех что когда-то постила в ЖЖ, про «чудо» сама смастерила, с мышками — из сети

Открываем.

ФШ оба файла сразу разложил на слои  (в отдельных вкладках каждая картинка, само собой).

Первым делом обрезала лишнее: ресайзятся гифы легко, так же как обычные изображения. «Страшилка» оказалось прозрачной, что упрощает задачу.

По сути — обычная фотошоповская процедура «скопировать слои, вставить слои». Смысл выполняемых действий подробно описан в посте об устройстве гиф-анимации.
Добавлю лишь несколько замечаний касательно сращивания готовых изображений:

всё кликабельно

Не обязательно, чтобы картинки были одного размера — мелкую фенечку не нужно растягивать в формат более крупного изображения.  Но при ресайзе следует учесть особенности позиционирования. По-дефолту скопированное изображение разместится в левом верхнем углу полотна, исходя из этого нужно оставить «припуск на швы и поля».
После послойного склеивания перемещать «подселенный» объект геморно.

Одной из загвоздок сращивания называют различия в количестве кадров, скорости воспроизведения, предполагая головоломные расчеты.
— Не так все страшно =)
(Не сложнее, чем искусство приведения к общему знаменателю )

В «мышкином» фале 6 кадров, у «чуда» — 10. Продублировала в нем начало и конец — стало 12.  Скопированное как раз два раза укладывается.

Можно было и по другому - добавить к 6 пару кадров и убрать парочку кадриков из текстовой анимашки.

А со скоростями что?
— При копировании итоговый результат принимает длительность целевого кадра. То есть скорость воспроизведения, выставленная для кадров «чуда» сохранится.
Никакой страшной проблемы в этом нет. Регулируете длительность воспроизведения мувика в целом, так же, как в любом новом проекте: запустили, проверили, не понравилось сделали чуть быстрее или медленнее. Выделили какой-то момент чуть большей задержкой.
Если хотите, чтобы надпись вертелась как шальная — загодя добавьте дубликаты к каждому кадру копии (тогда «мышкиных» файлов тоже станет 12), и

отрегулируйте скорость воспроизведения для целевой картинки. А копируемую подгоняйте под нее, увеличивая или уменьшая количество кадров: — дубль (сдвоенный кадр), со скоростью воспроизведения, скажем 0.4 сек — все равно что один, вдвое  медленней.

Старичок-гиф — это все-таки баловство, забава, не критичное к точности настроек, доля секунды туда-сюда, на глазок подбирается.
Едва ли кто делает серьезные проекты на технологии сменяющихся кадров.
В серьезной анимации все нужные заливки, линии, полигоны генерируются на лету, по формулам, а не хранятся стопочкой в одном файле
(как например анимация нажатия кнопок в винде и тому подобное - они отрисовываются на ходу, безо всяких картинок)

Дольше рассказать, чем сделать )