Как создавать анимированные 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 продолжал удалять часть, которую я хотел сохранить, и сохранить часть, которую я хотел удалить. onehot не остановился бы на 10 секундах, несмотря ни на что. Он продолжал прыгать с 9 до 10,3 секунды. Я не нашел в kdenlive команду "вырезать". ffmpeg скопировал все видео, хотя я тщательно установил время начала и продолжительность . avconv не был найден поиском apt-cache.
Питиви наконец-то добился своего. С этим довольно легко. Загрузите видеофайл в небольшое подокно слева, перетащите его на дорожку, поместите курсор в то место, где вы хотите его вырезать. Кнопка вырезания и кнопка удаления находятся в правой части окна. После того, как кусок вырезан, вы нажимаете на него, чтобы выбрать его, и нажимаете удалить. Если отрезанный кусок находится в начале видео, перетащите оставшийся кусок в начальную позицию.
Чтобы сохранить, не нажимайте «Сохранить», нажмите «Визуализировать». У вас есть выбор форматов вывода. Выбрал mp4 и ogv. mp4 меньше, ogv лучшего качества. Рендеринг требует времени.
Но не так много времени, как мне потребовалось, чтобы во всем этом разобраться :).