改变形状中间补间的颜色

I'm trying to make an event that changes my shapes stroke color for 5 seconds when a button is clicked, and then the shape returns to original color after the duration.

我试图制作一个事件,当单击一个按钮时,我的形状描边颜色会改变5秒钟,然后在持续时间后形状恢复为原始颜色。

I am able to do this with clearing the entire stage and redrawing new shapes (which resets their position), but I can't figure it out with the current shapes.

我可以通过清除整个舞台和重新绘制新形状(重置它们的位置)来做到这一点,但我无法用当前的形状弄明白。

Q. What's the best way to approach making a change to a shapes color, during a Tween?

问:在补间期间,改变形状颜色的最佳方法是什么?

I was also curious if there's a better way to handling tweening the shapes width? Currently I am relying on ScaleX and ScaleY - but this also changes the stroke's size - which is not desired.

我还好奇是否有更好的方法来处理补间形状的宽度?目前我依赖于ScaleX和ScaleY - 但这也改变了笔画的大小 - 这是不希望的。

JS Fiddle

HTML

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

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

1 个解决方案

#1

There are a few questions in this post, so I will try to answer them all:

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

First, a solution to most of your issues is Graphic commands. Commands provide a simple way to store graphic instructions, and change them later. Here is a simple example:

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

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

You can read more about commands on the createjs blog. All commands and their properties are documented in the EaselJS docs.

您可以在createjs博客上阅读有关命令的更多信息。所有命令及其属性都记录在EaselJS文档中。

Change a color: I outlined this in the example above, but the short answer is to adjust the style property of a fill command. If you want to change it instantly, you can just set up a Tween.call:

更改颜色:我在上面的示例中概述了这一点,但简短的回答是调整fill命令的style属性。如果你想立即更改它,你可以设置一个Tween.call:

Example:

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

If you want to tween the color, then you could check out the ColorPlugin, which is currently in a "Plugins" branch of TweenJS: https://github.com/CreateJS/TweenJS/tree/Plugins/extras/plugins

如果你想补间颜色,那么你可以查看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"});

Change the size: The example above also shows how to modify the values of a drawRect call. You can do the same with any other draw command (including moveTo, lineTo, polyStar, etc).

更改大小:上面的示例还说明了如何修改drawRect调用的值。您可以对任何其他绘图命令(包括moveTo,lineTo,polyStar等)执行相同的操作。

Scaling also works, and if you want to not scale the stroke, just set the ignoreScale parameter on the stroke style.

缩放也有效,如果您不想缩放笔划,只需在笔触样式上设置ignoreScale参数。

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

#1