1

jsmovieのプラグインを使用しています。次のような基本的な使い方があります

$('.movie').jsMovie({
   images : ['loader_ani4x4.png'],
   folder : 'pic/loader/',
   height : 40, width: 40,
   grid   : {height:40, width:40, columns:4, rows:4},
   showPreLoader : false,
   playOnLoad    : true
});

などのイベントや

 *  play    -   is triggered when the movie starts playing
 *  pause   -   is triggered when the movie pauses
 *  stop    -   is triggered when the movie stops
 *  ended   -   is triggered when a clip played its last frame
 *  playing -   is triggered when the movie enters a frame
 *  loaded  -   is triggered when the movie has finished its loading process
 *  verbose -   is triggered when the movie outputs a verbose, the callback has an extra argument like function(e,output){} which contains the text

どのように私は再生イベントを使用できますか?

私はこのように試しましたが、うまくいきません

 $('#movie').jsMovie.playing(function(v){
    console.log();
});
4

5 に答える 5

1

play_movie_eventソースファイルを確認すると、ムービーを（フレームごとに）再生する関数である関数内に見つかりました。そのように見えます：

function play_movie_event(e, fromFrame, toFrame, repeat, performStop){

    if(fromFrame === undefined || fromFrame < 1){
        fromFrame = 1;
    }

    if(toFrame === undefined || toFrame > $(this).data("settings").images.length*$(this).data("settings").grid.rows*$(this).data("settings").grid.columns){
        toFrame = $(this).data("settings").images.length*$(this).data("settings").grid.rows*$(this).data("settings").grid.columns;
    }

    if(repeat === undefined){
        repeat = $(this).data("settings").repeat
    }

    if(performStop === undefined){
        performStop = true;
    }

    if($(this).data("currentStatus") == 'play'){
        clearInterval($(this).data("playingInterval"));
        $(this).data("currentStatus","playing");
        var self=this;
        $(this).data("playingInterval",setInterval(function() {
            // FPS Measurement
            if($(self).data("realFpsTimeStamp") != undefined){
                $(self).data("realFps",1/(((new Date()).getTime()-$(self).data("realFpsTimeStamp"))/1000));
                //verboseOut.apply($(self),[$(self).data("realFps").toFixed(2)+"fps"]);
            }else{
                $(self).data("realFps",$(self).data("settings").fps);
            }
            $(self).data("realFpsTimeStamp",(new Date()).getTime());

            // play frames
            if($(self).data("settings").playBackwards){
                if($(self).data("currentFrame").data('frame') == fromFrame && !repeat){
                    if(performStop){
                        $(self).trigger('stop');
                    }else{
                        $(self).trigger('pause');
                    }
                    $(self).trigger('ended');
                }else{
                    $(self).trigger('playing');
                    if($(self).data("currentFrame").data('frame') != fromFrame){
                        methods.previousFrame.apply($(self));
                    }else{
                        methods.gotoFrame.apply($(self),[toFrame]);
                    }
                }
            }else{
                if($(self).data("currentFrame").data('frame') == toFrame && !repeat){
                    if(performStop){
                        $(self).trigger('stop');
                    }else{
                        $(self).trigger('pause');
                    }
                    $(self).trigger('ended');
                }else{
                    $(self).trigger('playing');
                    if($(self).data("currentFrame").data('frame') != toFrame){
                        methods.nextFrame.apply($(self));
                    }else{
                        methods.gotoFrame.apply($(self),[fromFrame]);
                    }
                }
            }

        }, 1000/$(this).data("settings").fps));
    }
}

おそらくそれがどのように機能するかは気にしませんが、重要なのは次のような行です。

if($(self).data("currentFrame").data('frame') == toFrame && !repeat){
    if(performStop){
        $(self).trigger('stop');
    }else{
        $(self).trigger('pause');
    }
        $(self).trigger('ended');
}

これらすべてのトリガーを見ることができます。ドキュメント内のあらゆる場所に配置されます。つまり、それらを使用する良い方法は.on()

$('#movie').on('stop', function(){})

jQueryのドキュメントをチェックして、何.trigger()が機能するかを確認してください：http://api.jquery.com/trigger/

于 2013-07-05T14:39:02.830 に答える
0

ソースコードから：

$(this).trigger("play",[fromFrame,toFrame,repeat,performStop]);

は 249 行目で呼び出されます。thisこの場合は DOM 要素であり、プラグインの登録で確認できます。

$.fn.jsMovie = function(method) {
    //snip...
    } else if ( typeof method === 'object' || ! method ) {
        return methods.init.apply(this, arguments );
    //snip...
};

jsMovie プラグイン自体は、いくつかの独自のイベントをリッスンしているようです。

$(this).bind("play",play_movie_event);
$(this).bind("stop",stop_movie_event);
$(this).bind("pause",pause_movie_event);

したがって、彼ら自身の例に従うことができます。最後に、次のようなイベントを聞く必要があります (他の人が示唆しているように):

$('#movie').on('play',function(event,fromFrame,toFrame,repeat,performStop) {
    // event handler function
});
于 2013-07-05T14:42:02.137 に答える