5

1 つの HTML ページに多数の<img>タグがあり、そのうちのいくつかは同じアニメーション GIF ファイルを共有しています。URLはsrcJavaScript によって動的に設定されますが、私のコードでは同じ文字がすべて再生されるか、次の文字が最後のフレームですぐに表示されます。

アイデア:これはアート プロジェクト用です。いくつかのテキストが入力された後、文字は特別なフォントで表示され、アニメーション GIF を使用することによってのみ実現できる文字ごとに (次々に) トランジションが行われます。テキストは 1 文字に分割され、<img>タグは次のように作成されます。

<!-- delivered HTML at page load -->
<img src="initial/f.png"> <!-- I used to PNG here to outline -->
<img src="initial/o.png"> <!-- the animation is NOT set a first -->
<img src="initial/o.png">

アニメーションが始まると、最初<img>の URL は に設定されtransition/f.gifます。再生が終了した後でのみ (時間によって決定されます)、2 番目の画像が設定されます。

<!-- while 2nd animation is running -->
<img src="transition/f.gif"> <!-- already finished, displays last frame -->
<img src="transition/o.gif"> <!-- being animated right now -->
<img src="transition/o.png"> <!-- will be reset to o.gif in next step -->

私が解決できない問題:o.gif例から再生された後、次の O のアニメーションが正しく動作しません。

すべてのキャラクターのクラスを定義し、画像を として割り当ててみましたbackground-image。キャラクターの出現が再生されると、同じ文字の後続の出現が表示されるとすぐにそのGIFの最後のフレーム（終了状態）が表示されました。

JavaScript で属性を直接設定してみましsrcたが、このように 2 番目の文字 O を設定すると、最初の文字 O のアニメーションが同期して再起動します。ただし、最後のフレームにとどまります。

HTMLページはローカルファイルシステムでも動作するはずなので、キャッシュメカニズムをバイパスするなどの引数は機能しないか、何の効果もないと思いますo.gif?random=argument（一部のコンピューターでは、自分でテストしても改ざんされないかもしれません）。

4

2 に答える 2

2

GIF ではなく、画像シーケンスと Javascript の使用を検討してください。まさにそれを行う大まかなインスタンス化可能な Javascript オブジェクトをまとめました。

<html>
    <head>
        <script>
            function Animator(target, frames, delay)
            {
                var _this = this;
                // array of frames (image objects)
                var f = [];
                // a reference to the object where our frames will appear
                var t = document.getElementById(target);
                // the interval variable.  Used to stop and start
                var t_loop;
                // create a new image element and remember it
                var img_el = document.createElement("img");
                // current frame
                var c_frame = 0;

                t.innerHTML = "";
                t.appendChild(img_el);

                var i, img;

                // preload immediately
                for(i = 0; i < frames.length; i++)
                {
                    img = new Image();
                    img.src = frames[i];
                    f.push(img);
                }

                this.play = function()
                {
                    t_loop = window.setInterval(_this.frame, delay);
                }

                this.stop = function()
                {
                    clearInterval(t_loop);
                }

                this.gotoFrame = function(frame)
                {
                    c_frame = frame;
                    _this.frame();
                }

                this.frame = function()
                {
                    img_el.src = f[c_frame].src;

                    c_frame++;

                    if(c_frame >= f.length)
                    {
                        c_frame = 0;
                    }
                }
            }

            function loaded()
            {
                var quip_frames = [
                    "http://www.abcteach.com/images/abma_thumb.gif",
                    "http://www.abcteach.com/images/abcu_thumb.gif",
                    "http://www.abcteach.com/images/zbma_thumb.gif",
                    "http://www.abcteach.com/images/zbcu_thumb.gif",
                    "http://www.abcteach.com/images/dnma_thumb.gif",
                    "http://www.abcteach.com/images/dncu_thumb.gif"
                ];

                var anim1 = new Animator("target1", quip_frames, 100);

                var anim2 = new Animator("target2", quip_frames, 100);

                var anim3 = new Animator("target3", quip_frames, 100);

                anim1.play();
                window.setTimeout(anim2.play, 200);
                window.setTimeout(anim3.play, 300);
            }
        </script>
    </head>
    <body onload="loaded()">
        <div id="target1">
        </div>
        <div id="target2">
        </div>
        <div id="target3">
        </div>
    </body>
</html>

画像を提供してくれたABCTeachに感謝

オブジェクトは画像をループでロードし、それらを配列に格納してからsetInterval()、必要なレートでフレームを単純にスワップアウトします。ページが読み込まれると、これらのオブジェクトが 3 つ作成され、それぞれが異なる DIV を指しますが、それぞれ同じフレームを持ちます。次に、それぞれに異なる遅延で再生するように指示します (最初はすぐに、2 番目は 200 ミリ秒後、3 番目は 300 ミリ秒後に)。あなたの場合、使用する文字ごとに 1 つの配列を作成します。

var A = [*array of URLs to images of the letter A*];
var B = [*array of URLs to images of the letter B*];    
...

次に、ページ上のすべての div に対して新しいAnimatorオブジェクトを作成し、適切な文字配列を送信します。

var letter_so_and_so = new Animator("div_so_and_so", A, 100);
var letter_this_and_that = new Animator("div_this_and_that", B, 100);
var another_letter = new Animator("another_div", B, 100);

最後に、それぞれにオフセット開始を与えるか、Animator.gotoFrame(f)メソッドを呼び出して異なるフレームで開始します (忘れないでくださいAnimator.play()!)。

JSFiddle

このようなものをコードに採用してみてください。驚くほどうまくいくことがわかると思います。

于 2013-05-20T21:02:38.300 に答える