javascript - Google Doodle はどのように機能しますか?

Question

Google Doodle はどのように機能しますか?

調べてみると以下のようなものを見つけました

1. アニメーションGIF
2. アニメーション JPEG フレーム。スプライト イメージにはすべてのフレームがあり、このフレームは JavaScript を使用してアニメーション化されます。
3. キャンバス

どちらが正しいですか？

Answer 1

最初に、182 ピクセルの固定高さを持ち、オーバーフローを隠すタグ<img>内のすべてのアニメーション フレームを含むタグ JPEG を囲みます。<div>これにより、いわば固定ウィンドウが作成され、現在のアニメーション フレーム以外はすべてマスクされます。画像は JavaScript を使用してアニメーション化されます。これはtop、絶対位置の画像のプロパティを変更して、関数で一定間隔だけ上にスライドさせsetTimeout()ます。

これは、参照の1つからの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>

Jクエリ:

<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私はandCanvasに行きますが、うまくいくAPNGかもしれません。Doodle で 256 ビットのカラー画像を見たことがありません。たぶんwebm。Doodle には音声付きのものもあれば、インタラクティブなものもあるので、目的に応じて何でも使用していると思います。