1

基本的に、使用するstage.onFrame(function(frame){animationLayer.draw()});とぎくしゃくしたアニメーションが得られますが、次のようなことをsetInterval(draw, 25);行っanimationLayer.draw();て描画すると、スムーズなアニメーションが得られます。

KineticJS で何か間違ったことをしているのですか、それともパフォーマンスが少し悪いのでしょうか? 私は四角形を回転させただけでしたが、とてもぎくしゃくしています。

Firefox よりも Chrome の方が悪いですが、Firefox はまだ完全にスムーズではありません。

誰にも理由がありますか？

    var debug, stage, animationLayer;
    var sw, sh;
    var spinRect;

    var blobArray = [];

    window.onload = function() {
        debug = document.getElementById('debug');

        stage = new Kinetic.Stage({container: "kineticdiv", width: 700, height: 400});
        animationLayer = new Kinetic.Layer();    
        sw = stage.attrs.width;
        sh = stage.attrs.height;

        spinRect = new Kinetic.Rect({
            x: sw/4*3, 
            y: sh/2,
            width: 50, 
            height: 50,
            fill: "#eee", 
            stroke: "#777",
            strokeWidth: 2,
            centerOffset: {
                x: 25,
                y: 25
            }
        });

        var centerRect = new Kinetic.Rect({
            x: sw/4-5, 
            y: sh/2-5,
            width: 10, 
            height: 10,
            fill: "cyan",
            stroke: "black",
            strokeWidth: 2
        });

        animationLayer.add(spinRect);
        animationLayer.add(centerRect);
        stage.add(animationLayer);

        setInterval(update, 25); // 33 ms = 30 fps, 25 ms = 40 fps

        stage.onFrame(function(frame){animationLayer.draw()});
        stage.start();
    };

    function update()
    {
        spinRect.rotate(0.03); //Math.PI / 100); // even removed this for less calculations
        // animationLayer.draw() // smoother if I use this instead
    }

ありがとう

編集:ここでのいくつかの問題は Chrome のせいであることが判明しました。最近の更新で問題が発生しています。

4

1 に答える 1

3

v3.9.4 が本日リリースされ、アニメーションとトランジションが大幅に改善されます。このアニメーションはスムーズですか？

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-animate-position-tutorial/

また、同時に多くのものが実行されていると、アニメーションがぎくしゃくすることがあります。requestAnimFrame を使用するこの例をチェックして、これがスムーズかどうかを確認してください (純粋な JS、ライブラリなし):

http://paulirish.com/2011/requestanimationframe-for-smart-animation/

于 2012-04-29T03:24:05.580 に答える