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

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

---

자바 스크립트를 사용하여 GIF이미지 의 어떤 프레임 이 표시 되는지 제어 하거나 애니메이션을 중지 할 수 있습니까? GIF여러 프레임이 있는 a를로드하고 그중 하나만 표시 하고 싶습니다 .

많은 별도의 이미지로 할 수 있다는 것을 알고 있지만으로 원하는 것을 할 수 있다면 GIF걱정할 파일이 하나뿐입니다.

---

CSS 스프라이트를 사용하여 단일 이미지로 할 수 있습니다 .

---

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>

(대부분의 코드는 예제에서 직접 가져온 것입니다)

---

저는 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를 앞뒤로 재생 한 다음 앞뒤로 재생합니다.
• 디버깅 :
  • debug Gif Exploder의 디버그 출력을 켭니다.
  • exploded 재생을 중지하고 각 프레임을 나란히 렌더링합니다.

---

gif를 스프라이트 시트로 변환해도 괜찮다면 다음과 같이 할 수 있습니다 (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>

애니메이션이 자동으로 시작되지 않도록 paused하려면 animation규칙 끝에 추가하십시오 .

참고 URL : https://stackoverflow.com/questions/2385203/can-you-control-gif-animation-with-javascript