javascript - 谷歌涂鸦是如何工作的？

Question

Google 涂鸦如何工作？

当我搜索它时，我发现了以下内容

1. Gif 动画
2. 动画 Jpeg 帧。 Sprite 图像将包含所有帧，并且该帧使用 JavaScript 进行动画处理。
3. Canvas

哪一个是正确的？

Answer 1

首先，他们附上 <img>将 JPEG 标记为 <div> 内的所有动画帧标签的固定高度为 182 像素，并且 overflow hidden 。可以说，这创建了一个固定窗口，它屏蔽了除当前动画帧之外的所有内容。该图像使用 JavaScript 进行动画处理，这会更改 top绝对定位图像的属性，将其向上滑动固定间隔 setTimeout()功能。

以下是 Google 的一些示例代码，摘自引用资料:

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