2

最近EaselJに切り替えましたが、円の色をアニメーション化したいと思います。

私がこれまでに持っているコードはこれです：

var shape = new createjs.Shape();
shape.graphics.beginFill(createjs.Graphics.getRGB(255, 0, 0));
shape.graphics.drawCircle(0, 0, 10);
stage.addChild(shape);

var tween = createjs.Tween.get(shape, { loop: true }).
    to({color:"#00FF00" }, 1000);

しかし、それは機能しません。アニメートするのに適切なプロパティは何ですか？

4

5 に答える 5

4

そのような形状の色をアニメーション化することは不可能だと思います。結局のところ、形状の描画には多くの異なる色が含まれる可能性がありますが、Tweenはそれらの色のどれを変更するかをどのように知る必要がありますか？私が正しく知っていると考えることができる2つの方法があります：

方法1）を使用しcreatejs.ColorFilter、それをシェイプに適用してから、フィルターのプロパティをトゥイーンします。

var shape = new createjs.Shape();
//making the shape shape white, so we can work with the multiplyers of the filter
shape.graphics.beginFill(createjs.Graphics.getRGB(255, 255, 255));
shape.graphics.drawCircle(0, 0, 10);
stage.addChild(shape);
var filter = new createjs.ColorFilter(1,0,0,1); //green&blue = 0, only red and alpha stay
shape.filters = [filter];

var tween = createjs.Tween.get(filter, { loop: true }).
    to({redMultiplier:0, greenMultiplier:1 }, 1000);

私はこれをテストしなかったので...これが機能することを知らせてください。また、フィルターはシェイプでcache（）またはupdateCache（）を呼び出すときにのみ適用/更新されるため、tick関数に追加する必要があることに注意してください。

方法2）または、フレームごとに形状を再描画します...ただし、1）の方がおそらく簡単です。

于 2013-01-12T02:15:24.053 に答える
4

私は同じことをしようとしていました。私の解決策は、シェイプオブジェクトのカスタムプロパティをトゥイーンしてから、トゥイーンの「change」イベントでupdateメソッドを呼び出すことでした。これがお役に立てば幸いです。私はcreatejsを初めて使用しますが、これまでのところ、とても気に入っています。

var s = new createjs.Shape();
s.redOffset      = 157;
s.blueOffset     = 217;
s.greenOffset    = 229;

s.updateColor = function()
{
    var color = createjs.Graphics.getRGB( 
        parseInt(this.redOffset), 
        parseInt(this.greenOffset), 
        parseInt(this.blueOffset), 
        1);

    this.graphics.beginFill( color ).drawRect(0, 0, 300, 300);
}

createjs.Tween.get(this.background).to({ 
    redOffset   : 255,
    greenOffset : 255,
    blueOffset  : 255
},  3000).addEventListener('change', function()
{
    s.updateColor ();
});
于 2013-10-21T20:03:16.970 に答える
2

非フィルターバージョン。

var colorObj = { r:255, g:0, b:0 };
var shape = new createjs.Shape();
var command = shape.graphics.beginFill(createjs.Graphics.getRGB(colorObj.r, colorObj.g, colorObj.b)).command;
shape.graphics.drawCircle(60, 60, 10);
stage.addChild(shape);

var tween = createjs.Tween.get(colorObj, { loop: true }).to({ r:255, g:255, b:255 }, 1000);
tween.addEventListener( "change", function( event ) {
    command.style = createjs.Graphics.getRGB(Math.floor(colorObj.r), Math.floor(colorObj.g), Math.floor(colorObj.b));
});

beginFill（...）。コマンドオブジェクトを更新できます。

フィドル

https://jsfiddle.net/MasatoMakino/uzLu19xw/

于 2017-08-08T05:35:22.273 に答える
0

ここで色をアニメーション化するための別のオプションを読みました：http：//community.createjs.com/discussions/easeljs/4637-graphics-colour-animation

createjsinject-methodを利用します。提供されたコード例から関連するコードをコピーし、自分自身で少し説明しました。

ドキュメントによると：

inject（callback、data）：任意のContext2D（別名Canvas）API呼び出しをGraphicsキューに注入するためのメソッドを提供します。指定されたコールバック関数は、他の描画命令と順番に呼び出されます（...）

このメソッドを使用すると、たとえば、ネイティブのcontext2d fillstyleを変更して、easeljsがキャンバスに描画するために使用する塗りつぶしの色を変更できます。

ここでは、createjsに独自のsetColor関数（以下で定義）について説明します。したがって、この関数は、再描画するたびに自動的に実行されます。

var shape = new createjs.Shape();
shape.graphics.beginFill(createjs.Graphics.getRGB(255, 0, 0));
shape.graphics.inject(setColor, data)
shape.graphics.drawCircle(0, 0, 10);
stage.addChild(shape);

キャンバスのネイティブfillStyleメソッドを呼び出すsetColor関数の定義：

function setColor(o) {
    // sets the context2D's fillStyle to the current value of data.fill:
    this.fillStyle = o.fill; // "this" will resolve to the canvas's Context2D.
}

そして、塗りつぶしの値を変更するティック関数：

function tick(evt) {
    count = (count+3)%360;
    // update the value of the data object:
    data.fill = createjs.Graphics.getHSL(count, 100, 50);
    // redraw the stage:
    stage.update();
}
于 2013-11-11T17:58:30.563 に答える
0

塗りつぶしの指示を変更すると、色を変更するトリックが実行されます。これは、アニメーションの作成に役立つ場合があります。これの影響はわかりませんが、これは私にとっては非常にうまく機能します。これを試して、

        var circle = new createjs.Shape();
        circle.graphics.f('#ffffff').s('#000000').ss(0.7).arc((30 * j),50,10, 0, Math.PI * 2, 1);
        circle.number = j;
        circle.addEventListener('click', function(e) {
            var fillStyle = e.target.graphics._fillInstructions[0].params;
            var currentFillStyle=fillStyle[1]+"";
            for (var i = 0; i < circles.length; i++) {
                var resetFillStyle = circles[i].graphics._fillInstructions[0].params;
                resetFillStyle[1] = "#ffffff";
            }

            if (currentFillStyle == "#00B4EA") {
                fillStyle[1] = "#FFFFFF";
            } else {
                fillStyle[1] = "#00B4EA";
            }
            stage.update();

        })

お役に立てれば！

于 2015-10-21T10:06:29.220 に答える