javascript - 如何使用 EaselJS 和 TweenJS 为线条制作动画

Question

我的目标是使用 Tween 函数从 A 点到 B 点制作一条线动画。

我使用的绘图库是EaselJS对于补间我使用 TweenJS .

是否可以使用 moveTo 函数来动画一条从 A 点到 B 点的直线？

---

我目前的设置如下:

var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);

我的目标是为这条从 x100 y100 到 x0 y0 的路径设置动画。

---

动画示例:

我已经尝试使用以下方法进行此操作，但没有任何反应:

var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);
createjs.Tween.get(line).to({x: 0, y: 0}, 1000, createjs.Ease.sineInOut);

Nothing happens.

---

绘制示例:

但是，如果我使用它，我会得到预期的线条，但它不是动画的:

var line = new createjs.Shape();
line.beginStroke('cyan');
line.setStrokeStyle(3);
line.moveTo(100, 100);
line.lineTo(0, 0);

This draws a line as expected.

---

有什么方法可以将 lineTo 方法与我缺少的补间方法一起使用吗？我已经检查了 Easel 和 TweenJS 的文档，但找不到有关如何执行此操作或无法执行此操作的示例或任何明确说明。

感谢任何帮助。

Answer 1

最简单的方法是使用图形命令。 .command 属性返回最后创建的图形命令，然后您可以使用补间操作它:

var cmd = line.graphics.lineTo(100,100).command;
createjs.Tween.get(cmd).to({x:0}, 1000);

这是一个工作示例:https://jsfiddle.net/gskinner/17Lk8a9s/1/