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

Question

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

我使用的绘图库是EaselJS，对于 Tweening 我使用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);

什么都没发生。

---

绘制示例：

但是，如果我使用它，我会按预期得到该行，但它不是动画的：

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

这按预期画了一条线。

---

有没有办法将 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/