如何在 easeljs 中补间线条颜色 canvas

Question

我有一系列带有连接线的点，我正在 easel.js canvas 中制作动画。点四处移动，线在移动时与它们保持连接。随着点的移动，我正在为它们的颜色设置动画，所以我希望线条也为颜色设置动画。

我尝试在线上调用补间颜色，但它要求我先缓存该行。

对于一个圆，这很容易 - 我得到了半径，并且由于它的注册在中心，所以它的 x 和 y 坐标以及宽度和高度很容易计算（对于 r=100 在 50 处的圆， 50，它的缓存将是 cache(0,0,100,100)。但是对于一行，我不确定如何为缓存语句引用正确的坐标，尤其是因为行的起始位置、结束位置和长度总是在变化。

有人有办法做到这一点吗？

我正在使用 greensock 的 timelinemax / tweenlite 和 easeljs 插件来处理所有动画，如果这有帮助的话。

Answer 1

如果 TweenLite 处理颜色补间，那么您应该可以随时更新行的 "style"：

var shape = new createjs.Shape();
var colorCommand = shape.graphics.beginStroke("#000000").command;
shape.graphics.moveTo(0,0).lineTo(100,100); // Draw the line
// Any time
colorCommand.style = "#ff0000";
// So in a tween:
TweenLite.to(colorCommand, 20, {style:"#00ffff"});

如果你使用的是EaselJS，你也可以使用TweenJS，它有一个ColorPlugin。使用类似的代码：

createjs.Tween.get(colorCommand).to({style:"#00fffff"}, 20000);

这是一个 fiddle 我用 TweenJS 补间了一条线的颜色 https://jsfiddle.net/lannymcnie/5zxpb944/

干杯。

如何在 easeljs 中补间线条颜色 canvas

How to tween a line color in easeljs canvas

javascript

canvas

easeljs

gsap