2

スプライトをアニメーション化するためにSpritelyを使用しています。私はうまくパンすることができましたが、私の最終的な仕事は、フェードインおよびフェードアウトする「スター」を作成することです。スプライトシートを作成しました：

スプライト

ここにあるドキュメントに従い、フレーム数と1秒あたりのフレーム数を変更しました。

$('#star').sprite({fps: 24, no_of_frames: 12});

私の問題は、スプライトのアニメーションがぎくしゃくしていて、スプライトの画像に沿っていないように見えることです。スプライトの画像はフェードインしてからフェードアウトするはずです。現在、それは半可視と完全の間でぎくしゃくしています。

Chromeのコンソールを使用してフレームをログに記録しましたが、フレーム0、1、2しか取得されていないようです。12フレーム（スプライトの画像ごとに1つ）を期待していましたが、これは初めてなので、間違っている可能性があります。ログによると、最後のフレームにも到達していないようです。

ここに画像の説明を入力してください

これが私のコードの全文です：

(function($) {
        $(document).ready(function() {           
           $('.purplestar').sprite({
                fps: 24, 
                no_of_frames: 12,
                start_at_frame: 0,
                        on_first_frame: function(obj) {
                            if (window.console) {
                                console.log('first frame');
                            }
                        },
                        on_last_frame: function(obj) {
                            if (window.console) {
                                console.log('last frame');
                            }
                        },
                        on_frame: {
                            2: function(obj) {
                                if (window.console) {
                                    console.log('frame 2');
                                }
                            },
                            1: function(obj) {
                                if (window.console) {
                                    console.log('frame 1');
                                }
                            },
                            0: function(obj) {
                                if (window.console) {
                                    console.log('frame 0');
                                }
                            },
                            3: function(obj) {
                                if (window.console) {
                                    console.log('frame 3');
                                }
                            }
                        }
            });

           $('#balloonleft').pan({fps: 30, speed: 4, dir: 'up', depth: 70});
           $('#balloonright').pan({fps: 30, speed: 3, dir: 'up', depth: 70});
           $('#bird')
                    .sprite({
                        fps: 9, 
                        no_of_frames: 3,
                        // the following are optional: new in version 0.6...
                        start_at_frame: 2
                    })
                    .spRandom({top: 50, bottom: 200, left: 300, right: 320})
                    .activeOnClick()
                    .active();

    });
    })(jQuery);
4

2 に答える 2

1

これではあなたの質問に答えられないことは知っていますが、この特定のスプライトをアニメーション化するためにスプライトを使用することはありません。スプライトの画像は不透明度を除いて変更されないため、標準のjQueryライブラリの一部であるfadeToggleなどを使用してオブジェクトの不透明度を変更するだけで、はるかにスムーズな効果が得られます。

于 2012-10-25T17:32:39.907 に答える
0

まず第一に、Rohaqの答えに感謝します。これは別の方法を提供しますが、私の質問に直接答えることはできません。私はそれを理解することができました。

background-positionのプロパティをスプライト効果的に変更しますdiv。私の問題は、フレーム数で割ったときに整数が生成されない幅のスプライトがあることが原因であることがわかりました。スプライトの幅を1200pxに変更したとき、12フレームでは、これは各フレームが100pxであることを意味しました。57.5pxになる前は、機能しませんでした。

フレームの1つが他のフレームよりも左に1pxのスプライトを持っていたので、ぎくしゃくした性質は私自身のやり方でした。

于 2012-11-02T10:44:19.883 に答える