Ändern Farbe der Form Mid Tween

Question

Ich versuche, ein Ereignis, das meine Formen Strichfarbe für 5 Sekunden ändert, wenn eine Schaltfläche geklickt wird, und dann die Form nach der Dauer auf die ursprüngliche Farbe zurückkehrt.

Ich kann dies mit dem Löschen der gesamten Bühne und Neuzeichnen neuer Formen (die ihre Position zurückgesetzt), aber ich kann es nicht mit den aktuellen Formen herausfinden.

Q. Was ist die beste Möglichkeit, während eines Tweens eine Änderung an einer Formenfarbe vorzunehmen?

Ich war auch neugierig, ob es eine bessere Möglichkeit gibt, Tweening die Formenbreite zu behandeln? Momentan verlasse ich mich auf ScaleX und ScaleY - aber das ändert auch die Größe des Strichs - was nicht erwünscht ist.

JS Fiddle

HTML

<button id="change">Click to Change Color</button> 
<canvas id="demoCanvas" width="500" height="500"></canvas> 

JS

var stage, 
     circle; 

function init() { 
    stage = new createjs.Stage("demoCanvas"); 
    createjs.Ticker.setFPS(60); 
    createjs.Ticker.addEventListener("tick", stage); 
} 

function createCircle(){ 
    circle = new createjs.Shape().set({name:"circle"}); 
    circle.graphics.setStrokeStyle(1).beginStroke("#000").beginFill("#FFF").drawCircle(0, 0, 20); 
    circle.x = 100; 
    circle.y = 100; 

    stage.addChild(circle); 

    createjs.Tween.get(circle, {loop: true}) 
    .to({x: 225, y: 225}, 1000, createjs.Ease.getPowInOut(1)) 
    .to({x: 100, y: 100}, 1000, createjs.Ease.getPowInOut(1)); 

    circle2 = new createjs.Shape().set({name:"circle"}); 
    circle2.graphics.setStrokeStyle(1).beginStroke("#000").beginFill("#FFF").drawCircle(0, 0, 20); 
    circle2.x = 400; 
    circle2.y = 400; 

    stage.addChild(circle2); 

    createjs.Tween.get(circle2, {loop: true}) 
    .to({scaleX: 2, scaleY: 2, x: 425, y: 125}, 1000, createjs.Ease.getPowInOut(1)) 
    .to({scaleX: 1, scaleY: 1, x: 400, y: 400}, 1000, createjs.Ease.getPowInOut(1)); 

    stage.update(); 
} 

$("#change").click(function() { 
    // change color 
}); 

$(document).ready(function() { 
    init(); 
    createCircle(); 
}); 

Answer 1

Es gibt ein paar Fragen in diesem Beitrag, also werde ich versuchen, sie alle zu beantworten:

Erstens, eine Lösung für die meisten Ihrer Probleme ist Grafikbefehle. Befehle bieten eine einfache Möglichkeit, grafische Anweisungen zu speichern und später zu ändern. Hier ist ein einfaches Beispiel:

var shape = new createjs.Shape(); 
var colorCmd = shape.graphics.beginFill("red").command; 
var rectCmd = shape.graphics.drawRect(0,0,100,100).command; 
// Later 
colorCmd.style = "blue"; 
rectCmd.w = 200; 
stage.update(); // Remember to update the stage after changing properties 

Sie können mehr über Befehle auf dem createjs blog lesen. Alle Befehle und ihre Eigenschaften sind in der EaselJS docs dokumentiert.

---

1. ändern Farbe: Ich skizzierte dies im Beispiel oben, aber die kurze Antwort ist die style Eigenschaft eines Fill-Befehl einzustellen. Wenn Sie es wollen, sofort ändern, können Sie nur die Einrichtung eines Tween.call:

Beispiel:

createjs.Tween.get(circle, {loop: true}) 
    .to({x: 225, y: 225}, 1000, createjs.Ease.getPowInOut(1)) 
    .call(function(tween) { 
     colorCmd.style = "rgba(0, 0, 255, 0.5)"; // Change to 50% blue 
    }) 
    .to({x: 100, y: 100}, 1000, createjs.Ease.getPowInOut(1)); 

Wenn Sie Tween die Farbe wünschen, dann können Sie den ColorPlugin Check-out, die befindet sich derzeit in einer "Plugins" Zweig der TweenJS: https://github.com/CreateJS/TweenJS/tree/Plugins/extras/plugins

// Tween the color from its current value to blue. 
// Note that only hex, short hex, HSL, and RGB formats are supported. 
createjs.Tween.get(colorCmd).to({style:"#0000ff"}); 

2. Ändern Sie die Größe: Das obige Beispiel zeigt auch, wie Sie die Werte eines drawRect Aufrufs ändern. Sie können dasselbe mit jedem anderen Zeichenbefehl (einschließlich moveTo, lineTo, polyStar usw.) tun.

Skalierung funktioniert auch, und wenn Sie nicht den Hub wollen maßstäblich, setzen Sie einfach die ignoreScale Parameter auf der stroke style.

shape.graphics.setStrokeStyle(1, null, null, null, true);