Javascript로 GIF 애니메이션을 제어 할 수 있습니까?

Question

자바 스크립트를 사용하여 GIF 이미지의 어느 프레임이 애니메이션을 표시하고/또는 중지하는지 제어 할 수 있습니까? GIF을 여러 프레임으로로드하고 그 중 하나만 표시 할 수있게하려고합니다.

나는 별개의 많은 이미지를 가지고 그것을 할 수 있다고 알고 있지만, 내가 원하는 것을 할 수 있다면 GIF으로 할 수있다. 걱정할 파일은 하나 뿐이다.

Answer 1

CSS sprites을 사용하여 단일 이미지로 처리 할 수 ​​있습니다.

Answer 2

libgif 라이브러리를 사용할 수 있습니다.

gif를 시작/중지하고 gif가 켜져있는 프레임을 제어 할 수 있습니다.

<script type="text/javascript" src="./libgif.js"></script> 
<img src="./example1_preview.gif" rel:animated_src="./example1.gif" 
width="360" height="360" rel:auto_play="1" rel:rubbable="1" /> 

<script type="text/javascript"> 
    $$('img').each(function (img_tag) { 
     if (/.*\.gif/.test(img_tag.src)) { 
      var rub = new SuperGif({ gif: img_tag }); 
      rub.load(function(){ 
       console.log('oh hey, now the gif is loaded'); 
      }); 
     } 
    }); 
</script> 

(대부분의 코드는 자신의 예에서 직접 촬영)

Answer 3

내가 x-gif을 사용하여이 설정 꽤 시원하고 간단합니다.

Github에서 :

<x-gif src="probably_cats.gif"></x-gif> 

당신이 추가 할 수있는 속성으로 다음

• 재생 모드 :
  • speed="1.0" (기본 모드 것은)의 값으로 속도를 곱 속성;
  • sync은 외부 개체에 대한 재생을 연기합니다.
  • bpm="120"은 주어진 분당 비트 수에 GIF를 동기화합니다.

• 옵션 :

  • stopped이 애니메이션에서 GIF를 방지;

  • fill은 GIF를 확장하여 컨테이너를 덮습니다.

  • n-times="3.0" (속도 모드 만 해당) 설정된 횟수만큼 재생을 중지합니다 (중지 된 속성 추가).
  • snap (동기화 & bpm 모드에서만) 더 긴 GIF가 여러 비트에 동기화되도록 허용하는 대신 하나에 맞게 강제합니다.
  • ping-pong GIF 앞에서 뒤로, 뒤에서 앞에서 재생됩니다.
• 디버깅 :있는 GIF 폭발에서 디버그 출력 온
  • debug ;
  • exploded은 재생을 중지하고 각 프레임을 나란히 표시합니다.

Answer 4

당신이 스프라이트 시트에 GIF 변환에 OK 있다면, 당신은 그것을 (ImageMagick를 사용하여) 이런 식으로 할 수 있습니다 : 새로운 이미지가 될 것으로도 보인다

montage animation.gif -coalesce -tile x1 -geometry +0+0 -background None -quality 100 spritesheet.png 

을 더 작은 크기의.

일단 스프라이트 시트가 있으면 CSS 애니메이션을 사용하십시오. 고정 된 프레임 시간을 가진 애니메이션이 여기에 사용됩니다

var el = document.getElementById('anim'); 
 
function play() { 
 
    el.style.animationPlayState = 'running'; 
 
} 
 
function pause() { 
 
    el.style.animationPlayState = 'paused'; 
 
} 
 
function reset() { 
 
    el.style.animation = 'none'; 
 
    el.offsetHeight; /* trigger reflow to apply the change immediately */ 
 
    el.style.animation = null; 
 
} 
 
function stop() { 
 
    reset(); 
 
    pause(); 
 
}

#anim { 
 
    background-image: url('https://i.stack.imgur.com/J5drY.png'); 
 
    width: 250px; 
 
    height: 188px; 
 
    animation: anim 1.0s steps(10) infinite; 
 
} 
 
@keyframes anim { 
 
    100% { background-position: -2500px; } 
 
}

<div id="anim" title="Animated Bat by Calciumtrice"></div> 
 
<button onclick="play()">Play</button> 
 
<button onclick="pause()">Pause</button> 
 
<button onclick="reset()">Reset</button> 
 
<button onclick="stop()">Stop</button>

당신이 애니메이션이 자동으로 시작 animation 규칙의 끝에 paused를 추가하지 않도록합니다.