改變顏色的形狀中間吐溫

Question

我試圖做一個事件，改變我的形狀描邊顏色5秒，當一個按鈕被點擊，然後形狀在持續時間後返回到原來的顏色。

我能夠做到這一點清除整個舞臺和重新繪製新的形狀（重置他們的位置），但我無法弄清楚當前的形狀。

問：什麼是在補間期間改變形狀顏色的最佳方法？

我也很好奇，如果有更好的方法來處理補間形狀的寬度？目前我依靠ScaleX和ScaleY--但這也會改變筆畫大小 - 這是不希望的。

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

有在這篇文章中的一些問題，所以我會盡量回答所有問題：

首先，解決大多數問題的方法是圖形命令。命令提供了一種簡單的方式來存儲圖形指令，並在稍後進行更改。下面是一個簡單的例子：

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 

你可以閱讀更多有關在createjs blog命令。所有命令及其屬性都記錄在EaselJS docs中。

---

1. 改變顏色：我概括這個在上面的例子，但簡短的回答是調整填充命令的style財產。如果你想立即改變它，你可以建立一個Tween.call：

例子：

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)); 

如果你想吐溫的顏色，那麼你可以檢查出ColorPlugin，這目前在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"}); 

更改大小：上面的示例還顯示如何修改drawRect調用的值。您可以對其他任何繪圖命令（包括moveTo，lineTo，polyStar等）執行相同的操作。

縮放也適用，如果你想沒有形成規模的行程，只設置了stroke style的ignoreScale參數。

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