☰

이미지 표시 시간이 불규칙한 애니메이션 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를 사용하여 그림이 바뀌어야 하는 정확한 순간을 나열할 수 있었습니다.

사진을 복제하여 file00.gif를 525개 복사하고 각각의 지속 시간을 0.05초로 설정하려고 생각했는데 이렇게 하면 엄청난 파일이 생성됩니다.

어떻게 해야 하나요?

그리고 음악은 어떻게 추가하나요? 애니메이션 GIF를 다른 형식으로 변환해야 할 것 같은데 어떤 형식인가요?

답변1

다른 방법을 찾았습니다. 분명히 애니메이션 gif의 프레임은 모두 같은 시간 동안 표시됩니다.

나는 사진을 표시하고 동시에 음악을 재생하기 위해 약간의 자바스크립트를 작성했습니다. 누구든지 관심이 있다면 여기에 전체 코드가 있습니다.

<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라는 하위 디렉터리에 동일한 이름(예: bear1_vid.png)을 가진 png 그림이 있는 경우 이 기능이 작동합니다. 지속 시간은 밀리초 단위이며 역순으로 기록됩니다(중첩된 setTimeout으로 인해). 그런 다음 원하는 대로 조정합니다. "something.html" 아래에 파일을 저장하고 브라우저에서 엽니다. (저는 파이어폭스를 사용합니다.)

그런 다음 전체 화면으로 재생할 수 있습니다. 오디오 파일 시작 부분에 10초의 무음을 추가하고 첫 번째 사진이 추가로 10초 동안 표시되도록 했습니다. 그림의 경우 코드에서 확인할 수 있습니다. 오디오에 무음을 추가하기 위해 저는 Audacity를 사용했습니다(파일의 시작 부분에 커서를 놓고 "생성/무음"을 선택).

전체 화면을 녹화하려면 이 초를 추가해야 했는데, 이것이 가장 쉬운 옵션이었습니다. 저는 사용하기 쉬운 SimpleScreenRecorder를 사용했습니다. "레코드 커서" 상자를 선택 취소하는 것을 기억하면 됩니다. 녹화가 시작될 때 Firefox가 열리고 "이 비디오는 이제 전체 화면입니다"라는 어리석은 메시지를 보았지만 제거 방법을 찾지 못했습니다(아직?). 마치 영상이 전체화면인 줄 몰랐던 것처럼 말이죠.

어쨌든, 나는 .mkv 비디오를 만들고 "거의 다 왔어. 이제 비디오의 시작과 끝을 자르는 방법을 찾아야 한다"고 생각했습니다.

하아.

animationmaker가 내 PC를 망가뜨렸습니다. avidemux가 설치되지 않았습니다. 깨진 파이프. vidcutter는 계속해서 유지하고 싶은 부분은 제거하고, 제거하고 싶은 부분은 저장해 주었습니다. 원샷은 무슨 일이 있어도 10초에 멈추지 않는다. 9.something에서 10.3초로 계속 점프했습니다. kdenlive에서 "cut" 명령을 찾지 못했습니다. ffmpeg는 시작 시간과 지속 시간을 신중하게 설정했지만 전체 비디오를 복사했습니다. apt-cache 검색으로 avconv를 찾을 수 없습니다.

마침내 Pitivi가 그 일을 해냈습니다. 이것으로 아주 쉽습니다. 왼쪽의 작은 하위 창에 비디오 파일을 로드하고 트랙으로 드래그한 다음 잘라내려는 위치에 커서를 놓습니다. 잘라내기 버튼과 삭제 버튼은 창 오른쪽에 있습니다. 조각이 잘려지면 해당 조각을 클릭하여 선택하고 삭제를 클릭합니다. 잘라낸 부분이 비디오의 시작 부분에 있는 경우 나머지 부분을 시작 위치로 드래그합니다.

저장하려면 "저장"을 클릭하지 말고 "렌더링"을 클릭하세요. 출력 형식을 선택할 수 있습니다. 저는 mp4와 ogv를 선택했습니다. mp4는 더 작고 ogv는 더 나은 품질입니다. 렌더링에는 시간이 걸립니다.

그러나 그 모든 것을 알아내는 데는 거의 시간이 걸리지 않았습니다 :).

관련 정보