Como criar GIFs animados com tempos de exibição de imagens irregulares?

Como criar GIFs animados com tempos de exibição de imagens irregulares?

Criei animações, acho que foi com o imagemagick. Tive que converter todas as minhas imagens para gif, nomeá-las como file00.gif, file01.gif, etc., então tive que digitar um comando. Eu deveria ter escrito isso...

Um dos parâmetros foi a duração de cada quadro. Todos tiveram a mesma duração.

Agora gostaria de fazer a mesma coisa, mas com um tempo personalizado para cada foto.

file00.gif deve ser exibido durante 5,25 segundos, file01.gif deve ser exibido durante 3,8 segundos, etc.

Eu gostaria que acompanhasse um pouco de música. Usando o Audacity, consegui listar os momentos precisos em que a imagem deveria mudar.

Pensei em duplicar as imagens, fazer 525 cópias do arquivo00.gif e definir a duração de cada uma para 0,05 segundo, mas isso criaria um arquivo enorme.

Como posso fazer isso, por favor?

E como posso adicionar a música? Acho que terei que converter meu gif animado para algum outro formato, mas qual?

Responder1

Eu encontrei outra maneira. Aparentemente, os quadros em GIF animado são todos exibidos durante o mesmo período de tempo.

Escrevi um pouco de javascript para exibir minhas fotos e tocar música ao mesmo tempo. Aqui está o código completo, se alguém estiver interessado.

<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>

Deve funcionar para você se você tiver imagens png em um subdiretório chamado PNG, com os mesmos nomes (por exemplo: bear1_vid.png). As durações estão em milissegundos e são escritas em ordem inversa (devido ao setTimeout aninhado). Depois você adapta como quiser. Você salva o arquivo em “something.html” e o abre com um navegador. (eu uso Firefox).

Então eu poderia jogar em tela cheia. Adicionei 10 segundos de silêncio no início do meu arquivo de áudio e fiz com que a primeira imagem fosse exibida por mais 10 segundos. Para a imagem, você pode ver isso no código. Para adicionar o silêncio no áudio usei o Audacity (coloque o cursor no início do arquivo e selecione "Gerar/Silenciar").

Tive que adicionar esses segundos para gravar a tela inteira, que é a opção mais fácil. Usei o SimpleScreenRecorder, que é fácil de usar. Basta lembrar de desmarcar a caixa "cursor de gravação". No início da minha gravação, vi o Firefox abrindo e aquela mensagem boba "Este vídeo agora está em tela cheia", que não descobri como remover (ainda?). Como se não soubéssemos que o vídeo estava em tela cheia.

Enfim, acabei com um vídeo .mkv e pensei: "Quase lá. Agora só falta descobrir como cortar o início e o fim do vídeo".

Ah.

Animationmaker travou meu pc. avidemux não foi instalado. Cano quebrado. O vidcutter continuou removendo a parte que eu queria manter e salvando a parte que queria remover. oneshot não pararia em 10 segundos, não importa o quê. Ele continuou saltando de 9 e poucos para 10,3 segundos. Não encontrei o comando "cut" no kdenlive. ffmpeg copiou o vídeo inteiro, embora eu tenha definido cuidadosamente o horário de início e a duração. avconv não foi encontrado pela pesquisa do apt-cache.

Pitivi finalmente resolveu o problema. Com isso é bem fácil. Carregue o arquivo de vídeo na pequena subjanela à esquerda, arraste-o para uma trilha, coloque o cursor onde deseja cortá-lo. O botão cortar e o botão excluir estão no lado direito da janela. Depois que uma peça é cortada, você clica nela para selecioná-la e clica em excluir. Se a parte que você cortou estiver no início do vídeo, arraste a parte restante até a posição inicial.

Para salvar, não clique em “Salvar”, clique em “Renderizar”. Você tem uma escolha de formatos de saída. Eu escolhi mp4 e ogv. mp4 é menor, ogv é de melhor qualidade. A renderização demora um pouco.

Mas não tanto quanto levei para descobrir tudo isso :).

informação relacionada