更改形状中间补间的颜色

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

如果您想补间颜色，那么您可以查看当前位于 TweenJS 的“插件”分支中的 ColorPlugin：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"}); 

1. 更改大小：上面的示例还显示了如何修改drawRect 调用的值。您可以对任何其他绘图命令（包括 moveTo、lineTo、polyStar 等）执行相同操作。

缩放也可以，如果您不想缩放笔画，只需在stroke style 上设置ignoreScale 参数即可。

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