javascript - 谷歌涂鸦如何运作？

Question

谷歌涂鸦如何运作？

当我搜索它时，我发现以下

1. 动画 Gif
2. 动画 Jpeg 帧。Sprite 图像将包含所有帧，并且此帧使用 javascript 进行动画处理。
3. 帆布

哪一个是正确的？

Answer 1

首先，他们将<img>标签 JPEG 与所有动画帧封装在一个<div>标签内，该标签具有 182 像素的固定高度并隐藏溢出。可以这么说，这会创建一个固定窗口，它会屏蔽除当前动画帧之外的所有内容。该图像使用 JavaScript 进行动画处理，该 JavaScript 更改top绝对定位图像的属性以使用该函数将其向上滑动固定间隔setTimeout()。

以下是谷歌从参考文献中获得的一些示例代码：

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

查询：

<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

我会选择Animated JPEGand Canvas，虽然APNG也可以。我还没有在涂鸦上看到 256 位彩色图像。甚至可能是一个webm. 有些涂鸦有声音，有些是互动的，所以我认为他们使用任何他们认为适合他们目的的东西。