5

私はKineticJSを初めて使用し、スタックしています。不透明なシンプルなアニメーションを使いたいのですが、見た目ほど「シンプル」ではないことがわかりました。KineticJSを使用したアニメーションに関するドキュメントを読みました（このチュートリアルについて簡単に言うことはありません）。知りたいことJQueryやJCanvaScriptのようにKineticJSでアニメーション化する簡単な方法はありますか？例えば

this.animate({
   opacity:0,
   x: 50
}, 500);

このようなもの？

ない場合は、JQueryでKineticJSを使用してアニメーションをシンプルにすることはできますか？ 非常に興味深いコードが含まれているこのプロジェクトを見つけました。

$(logo.getCanvas()).animate({
            opacity: 1,
            top: "+=50px"
        }, 1000);

だからみんなどう思いますか？この方法を使用するのはバグがありますか？

4

1 に答える 1

5

不透明度のアニメーションを実行する必要がある場合：アニメーションに対して実行された計算を非表示にするJQueryに固執する必要があります（そして、あなたが指摘したことは良い解決策です）。

アニメーションをより細かく制御したい場合は、KineticJSを使用してください。

全体を通して、KineticJSだけを使用するのではなく、JQueryアニメーションとKineticJSレイヤーを同時に使用しようとすると、より多くの問題が発生すると思います（Kinetic.Animationは、操作方法を理解すれば非常に簡単です）

編集：アニメーションのクイックハウツー：

したがって、ご覧のとおり、Kineticでは、JQueryのように最終的な位置を指定しません。アニメーションの各フレームで呼び出される関数にアクセスでき、すべてのロジックをその中に配置する必要があります。

<script>
// you should have an object yourShape containing your KineticJS object.

var duration = 1000 ; // we set it to last 1s 
var anim = new Kinetic.Animation({
    func: function(frame) {
        if (frame.time >= duration) {
            anim.stop() ;
        } else {
            yourShape.setOpacity(frame.time / duration) ;
        }
    },
    node: layer
});

anim.start();
</script>
于 2012-08-26T13:03:47.480 に答える