Google 기념일 로고는 어떻게 작동하나요?

Question

Google 기념일 로고는 어떻게 작동하나요?

내가 그것을 검색

, 내가

1. 애니메이션 GIF
2. 애니메이션 이펙 프레임 다음
   을 발견했다. 스프라이트 이미지에는 모든 프레임이 있으며이 프레임은 자바 스크립트를 사용하여 애니메이션으로 표시됩니다.
3. 캔버스 하나가 올바른지

?

Answer 1

먼저 <div> 태그 안의 모든 애니메이션 프레임이 182 픽셀로 고정되어 있고 오버플로가 숨겨져있는 <img> 태그 JPEG를 둘러 쌉니다. 이렇게 말하자면 고정 된 창을 만들어 현재 애니메이션 프레임을 제외한 모든 마스크를가립니다. 이미지는 setTimeout() 함수로 고정 된 간격 위로 슬라이드시키기 위해 절대 위치 지정된 이미지의 top 속성을 변경하는 JavaScript를 사용하여 애니메이션됩니다.

<div style="height:182px;position:relative;width:468px;overflow:hidden"> 
    <img border="0" src="source.jpg" id="filmstrip" style="position: absolute; height: 2912px; top: -0px; display: block; "> 
</div> 

JQUERY :

<script> 

function naiveAnimation(id) { 

    var img = document.getElementById(id); 
    var offset = 0; 
    var animate = function() { 
     //slide the image correct frame of animation given by offset 
     img.style.top = -offset + "px"; 
     //calculate offset to next frame 
     offset = Math.floor(offset + 182); 
     //if we are not yet on the last frame... 
     if(offset < 2912) { 
      //call me again in half a second 
      window.setTimeout(animate, 500); 
     } else { 
      //at last frame, so all done! 
     } 
    }; 
    //start the animation 
    animate(); 
} 

naiveAnimation('filmstrip'); 

</script> 

Answer 2

APNG도 사용할 수 있지만 Animated JPEG과 Canvas으로 갈 것입니다. 기념일 로고에 256 비트 컬러 이미지를 보지 못했습니다. 어쩌면 webm 일 수도 있습니다. 일부 기념일 로고는 소리가 나고 일부는 대화 형이므로 일부 사람들은 자신의 목적에 맞는 것을 사용합니다.