Question

Google Doodle如何运作？

当我搜索它时，我发现了

动画Gif
动画Jpeg框架。精灵图像将包含所有帧，并使用javascript对此帧进行动画处理。
帆布

哪一个是正确的？

Answer 1

首先，它们将<img>标记JPEG与所有动画帧一起包含在<div>标记内，该标记具有182像素的固定高度并隐藏溢出。这样可以创建一个固定的窗口，它可以屏蔽除当前动画帧之外的所有窗口。图像使用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>

Answer 2

我会选择Animated JPEG和Canvas，但APNG也可以。我还没有看到涂鸦上的256位彩色图像。甚至可能是webm。有些涂鸦有声，有些是互动的，所以我认为它们会使用他们认为适合其目的的任何东西。

Google Doodle如何运作？

2 个答案: