改变形状中间补间的颜色 [英] Change Color of Shape Mid Tween

问题描述

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

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?

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

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小提琴

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

推荐答案

这篇文章中有几个问题，所以我将尽力回答所有问题：

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

您可以在 createjs blog 。所有命令及其属性都记录在 EaselJS docs 中。

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

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

1. 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:

示例：

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

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

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

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

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

缩放也有效，如果你不想缩放笔划，只需设置 ignoreScale 笔画风格上的参数。

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

这篇关于改变形状中间补间的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！