☰

Как создать анимированные GIF-файлы с нерегулярным временем отображения изображений?

tag-icon • tag-icon command-line software-recommendation video gif
Как создать анимированные GIF-файлы с нерегулярным временем отображения изображений?

Я создал анимацию, кажется, с помощью imagemagick. Мне пришлось конвертировать все изображения в gif, называть их file00.gif, file01.gif и т. д., затем мне пришлось ввести команду. Мне следовало бы записать ее...

Одним из параметров была длительность каждого кадра. Они все имели одинаковую длительность.

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

file00.gif должен отображаться в течение 5,25 секунд, file01.gif должен отображаться в течение 3,8 секунд и т.д.

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

Я думал продублировать изображения, сделать 525 копий file00.gif и установить длительность каждой 0,05 секунды, но это создало бы огромный файл.

Как мне это сделать, пожалуйста?

И как мне добавить музыку? Думаю, мне придется конвертировать анимированный gif в какой-то другой формат, но в какой?

решение1

Я нашел другой способ. Видимо, кадры в анимированном gif-файле отображаются в течение одинакового времени.

Я написал немного javascript, чтобы отображать мои картинки и одновременно воспроизводить музыку. Вот полный код, если кому интересно.

<HTML>
<head>

<title>FuzzyWuzzy</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

table {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>

</head>

<body>

<audio id="SONG">
  <source src="Fuzzy_Wuzzy_Was_A_Bear_10sec.ogg" type="audio/ogg">
  <source src="Fuzzy_Wuzzy_Was_A_Bear_10sec.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>


<table style="width:100%" id="table" name="table">
<tr>
<div> <img src="PNG/bear1_vid.png" id="pic" style="height:80%"></div>
</tr>
<tr>
<div id="text"><div>
</tr>
<tr>
<button onclick="openFullscreen();">Open Video in Fullscreen Mode</button>
</tr>
</table>

<script>

document.getElementById("text").innerHTML = " ";

video();

function video() {
  var x = document.getElementById("SONG"); 
  x.play(); 
    
setTimeout(function () {
    document.getElementById("pic").src = "PNG/bear1_vid.png"; 
    
  setTimeout(function () {
    document.getElementById("pic").src = "PNG/bear2_vid.png";
    setTimeout(function () {
      document.getElementById("pic").src = "PNG/bear3_vid.png";
      setTimeout(function () {
        document.getElementById("pic").src = "PNG/bear4_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/bear5_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/bear6_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/worm1_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/worm2_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/worm3_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/worm4_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/mouse1_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/mouse2_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/mouse3_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/mouse4_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/mouse5_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/mouse6_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/bear2_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/bear3_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/bear4_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/bear5_vid.png";
        setTimeout(function () {
        document.getElementById("pic").src = "PNG/bear6_vid.png";
        }, 2400); // Bear
        }, 2350);
        }, 2450);
        }, 2400);
        }, 4800);
        
        }, 2450); // Mouse
        }, 2350);
        }, 2450);
        }, 2350);
        }, 4800);
        }, 9600);
        
        }, 4800); // Worm
        }, 4900);
        }, 4300);
        }, 10000);
        
        }, 2450); // Bear
        }, 2350);
        }, 2450);
      }, 2300);
    }, 5250);
  }, 10000);
  }

var elem = document.getElementById("pic");
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
  
</script>

</body>
</HTML>

Он должен работать для вас, если у вас есть png-изображения в подкаталоге PNG с теми же именами (например, bear1_vid.png). Длительность указана в миллисекундах и записана в обратном порядке (из-за вложенного setTimeout). Затем вы адаптируете его по своему усмотрению. Вы сохраняете файл под именем "something.html" и открываете его в браузере. (Я использую Firefox).

Затем я мог воспроизвести его на весь экран. Я добавил 10 секунд тишины в начало моего аудиофайла и сделал так, чтобы первая картинка отображалась в течение 10 дополнительных секунд. Для картинки вы можете увидеть это в коде. Чтобы добавить тишину в аудио, я использовал Audacity (поставьте курсор в начало файла и выберите «Generate/Silence»).

Мне пришлось добавить эти секунды, чтобы записать весь экран, что является самым простым вариантом. Я использовал SimpleScreenRecorder, который прост в использовании. Вам просто нужно не забыть снять флажок «запись курсора». В начале записи я увидел открывающийся Firefox и это глупое сообщение «Это видео теперь на весь экран», которое я не нашел, как убрать (пока?). Как будто мы не знали, что видео было на весь экран.

Так или иначе, в итоге у меня получилось видео в формате .mkv, и я подумал: «Почти готово. Теперь осталось только найти, как обрезать начало и конец видео».

Ха.

animationmaker сломал мой компьютер. avidemux не установился. Сломанный канал. vidcutter постоянно удалял часть, которую я хотел сохранить, и сохранял часть, которую я хотел удалить. oneshot не останавливался на 10 секундах, несмотря ни на что. Он постоянно прыгал с 9 с чем-то до 10,3 секунд. Я не нашел команду "cut" в kdenlive. ffmpeg скопировал все видео, хотя я тщательно установил начальное время и продолжительность. avconv не был найден поиском apt-cache.

Pitivi наконец-то сделал свое дело. С этим все довольно просто. Загрузите видеофайл в небольшое подокно слева, перетащите его на дорожку, поместите курсор туда, где вы хотите его вырезать. Кнопка «Вырезать» и кнопка «Удалить» находятся в правой части окна. После того, как кусок вырезан, вы щелкаете по нему, чтобы выбрать его, и нажимаете «Удалить». Если вырезанный кусок находится в начале видео, перетащите оставшийся кусок в начальную позицию.

Чтобы сохранить, не нажимайте «Сохранить», нажмите «Рендер». У вас есть выбор выходных форматов. Я выбрал mp4 и ogv. mp4 меньше, ogv лучше по качеству. Рендеринг занимает некоторое время.

Но не так много времени, как мне потребовалось, чтобы во всем этом разобраться :).

Связанный контент