Question

我正在尝试制作一个事件，在单击按钮时将形状描边颜色更改5秒，然后在持续时间后形状恢复为原始颜色。

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

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

我还好奇是否有更好的方法来处理补间形状的宽度？目前我依赖于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

这篇文章中有几个问题，所以我会尝试全部回答：

首先，大多数问题的解决方案是图形命令。命令提供了一种存储图形指令的简单方法，并在以后进行更改。这是一个简单的例子：

REGEX

您可以在createjs blog上阅读有关命令的更多信息。所有命令及其属性都记录在EaselJS docs。

中

更改颜色：我在上面的示例中概述了这一点，但简短的回答是调整填充命令的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属性。如果您想立即更改，只需设置style：

示例：

Tween.call

如果您想补间颜色，那么您可以查看ColorPlugin，它目前位于＆＃34;插件＆＃34; TweenJS的分支：https://github.com/CreateJS/TweenJS/tree/Plugins/extras/plugins

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 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"});来电的值。您可以对任何其他绘图命令（包括moveTo，lineTo，polyStar等）执行相同的操作。

缩放也有效，如果您不想缩放笔划，只需在stroke style上设置drawRect参数。

ignoreScale

改变形状中间补间的颜色

1 个答案: