Question

我有一系列带有连接线的点，我在画架上画了动画。点移动，线条在移动时保持连接。随着点的移动，我正在设置它们的颜色动画，所以我希望线条也能为颜色设置动画。

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

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

任何人都有办法做到这一点？

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

Answer 1

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

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，您还可以使用具有ColorPlugin的TweenJS。使用类似的代码：

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

这是一个小提琴我用TweenJS https://jsfiddle.net/lannymcnie/5zxpb944/

补间线的颜色

干杯。

如何补充画架画布中的线条颜色

1 个答案: