更改形状中间补间的颜色

Question

我正在尝试创建一个事件，在单击按钮时更改我的形状描边颜色 5 秒，然后在持续时间后形状 returns 变为原始颜色。

我可以通过清理整个舞台并重新绘制新形状（重置它们的位置）来做到这一点，但我无法用当前形状弄明白。

问。在补间期间更改形状颜色的最佳方法是什么？

我也很好奇是否有更好的方法来处理形状宽度的补间？目前我依赖于 ScaleX 和 ScaleY - 但这也会改变笔划的大小 - 这是不需要的。

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

这个post中有几个问题，所以我会尽力回答它们：

首先，您的大部分问题的解决方案是图形命令。命令提供了一种简单的方法来存储图形指令，并在以后更改它们。这是一个简单的例子：

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. All commands and their properties are documented in the EaselJS docs 上阅读有关命令的更多信息。

更改颜色： 我在上面的示例中概述了这一点，但简短的回答是调整填充命令的 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));

如果你想 tween 颜色，那么你可以查看 ColorPlugin，它目前位于 TweenJS 的 "Plugins" 分支中：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);

更改形状中间补间的颜色

Change Color of Shape Mid Tween

javascript

createjs

easeljs

tweenjs