Change Color of Shape Mid Tween

问题

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.

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.

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:

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.

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:

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

// 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).

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

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

来源：https://stackoverflow.com/questions/36877474/change-color-of-shape-mid-tween

标签

javascript

createjs

easeljs

tweenjs