kineticjs - KineticJS で遷移可能な Shape クラスのプロパティ

Question

Shapeクラスのどのプロパティがライブラリで移行可能であるかは、私にはあまり明確ではありませんKineticJS。主観に光を当てることは非常に役立ちます。

Answer 1

Shapeのfillプロパティをトゥイーンできないことに気付いたので、最初に質問しました。

しかし、少し検索した後、snorkl の簡単な実験を見つけて、greensockの有名なTweenMaxを使用してアニメーション化する方法に目を向けました。

これが私がセットアップできたものです。皆さんのためにjsfiddleに置いておきますが、TweenMaxのCDNバージョンとKineticを見つけるのに苦労することはありません.

var stage = new Kinetic.Stage({
    container: 'canvasContainer',   //Some div's id on your page
    width: 800,
    height: 600
});

var layer = new Kinetic.Layer();

var circle = new Kinetic.Circle({
    x: 0,
    y: 0,
    radius: 50,
    fill: "#FF0000",
});

layer.add(circle);


TweenMax.to(circle, 1, {
    setX: 100,      //notice the camelType
    setY: 100,      //tweenMax translates setProperty to, circle.Property(tweened value)

    colorProps:{    //if you want to tween colour use colorProps
        setFill: randomRGB()
    }
});

TweenLite.ticker.addEventListener("tick", go);


function go() {
  layer.draw(); //redraws after each calculation
}

それが役に立てば幸い