4

アニメーション化するときにクライアントの同期を維持する方法についてのアイデアを探しています。私はmeteorを使用してブラウザベースのプロンプターを構築しようとしています。基本的な機能がダウンしていて、フォントサイズとスクロール速度を設定できますが、スクロールが開始された後、すべてのクライアントの同期を維持するための信頼できる方法がわかりません。

これまで私は2つの方法を試しましたが、どちらも機能しますが、どちらも完璧ではありません。

私の最初のアイデアは、コレクションを位置で更新する間隔をサーバーで実行することでした。これはLAN上で適切に機能しますが、インターネットに移動すると、更新とクライアントで監視されている更新との間の遅延により、スクロールが途切れる原因になりました。そのコードは次のようになりました。

サーバ：

if(Meteor.isServer){
    Meteor.methods({
        start_scroll: function(){
            interval = Meteor.setInterval(function() {
                var _speed = Prompter.findOne({_var:"prompter_speed"})._val;
                Prompter.update({_var:"prompter_y"}, {$inc:{_val:(-1*_speed/4)}});
            }, 30);
        }, ...
}

クライアント：

if(Meteor.isClient){
    Prompter.find({_var: "prompter_y"}).observe({
        changed: function(pos){
            $("#inner_scroll").css({top: pos._val});
        }
    });
}

上記のバージョンの主な問題は、更新を監視する際の遅延により、アニメーションが途切れるということです。そこで、クライアント側でアニメーション化することにしました。これが私がそのために思いついたものです：

サーバ：

if(Meteor.isServer){
    Meteor.methods({
        start_move: function(){
            Prompter.update({_var:"prompter_move"},{$set:{_val:1}});
        }, ...
}

クライアント：

if(Meteor.isClient){
    Prompter.find({_var: "prompter_move"}).observe({
        changed: function(obj){
            if(obj._val == 1){
                interval = Meteor.setInterval(function(){
                    var cp = parseFloat($("#inner_scroll").css("top"));
                    var sp = parseInt(Session.get("_speed"));
                    var mv = cp + (-1 * sp)/4;
                    $("#inner_scroll").css("top", mv);
                }, 30);
            }
            else{
                Meteor.clearInterval(interval);
            }
        }
    });
}

このバージョンのクライアントでは、アニメーションは非常にスムーズですが、（「開始」更新を監視する際の遅延のために）クライアントが同時に開始しない可能性があり、したがって同期されていません。これで私が気付いたもう1つの問題は、このバージョンでは（CPUパフォーマンスの観点から）低速のクライアントのスクロールが遅くなることです。

私はこれに頭を悩ませています、何か提案はありますか？

4

1 に答える 1

5

タイムスタンプの比較を使用して、すべてを同期させました。サーバーが更新要求を受信すると、タイムスタンプが作成されます。タイムスタンプは更新されたデータとともに渡されるため、クライアントはタイムスタンプを「現在」と比較し、それに応じて調整できます。

他の提案はまだ受け付けていますが、これは私にとってはかなりうまくいっています。

于 2012-10-31T22:54:30.320 に答える