你如何使用 EaselJS 和 TweenJS 为线条制作动画答案

【问题标题】：How do you animate a line using EaselJS and TweenJS你如何使用 EaselJS 和 TweenJS 为线条制作动画
【发布时间】：2016-01-13 22:11:17
【问题描述】：

我的目标是使用 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 的文档，但找不到示例或任何关于如何执行此操作或是否不可能执行此操作的明确说明。

感谢任何帮助。

【问题讨论】：

恐怕您可能需要在您的问题中添加minimal reproducible example 才能正确排除故障，没有足够的代码来找出您所做的事情为什么不起作用
@ochi 我已经用更全面的起点更新了示例，这应该可以帮助您理解我想要实现的目标。如果您觉得缺少什么，请告诉我。
看API（createjs.com/docs/easeljs/classes/Graphics.html#method_lineTo）表示在使用lineTo(x,y)之前必须调用moveTo(x,y)——所以看来move to相当于举起铅笔移动光标到给定的坐标，然后 line to 降低铅笔并将其移动到给定的坐标（当铅笔现在向下，接触画布时有效地绘制线）
嘿@ochi 感谢您的更新。是的，我已阅读文档，并且我了解在更改线的位置之前需要 moveTo。我再次更新了示例以完整显示每个案例，因此更加清晰。实际上，我在两个示例中都使用 moveTo 来放置线条的起始位置，然后在每种情况下都使用不同的方法来移动线条。在第一个中，我尝试使用 Tween 函数对其进行动画处理（并且失败），在第二个中，我使用 lineTo 方法并在没有动画的情况下成功。
我明白了，抱歉我从一开始就不清楚

标签： javascript canvas createjs easeljs tween.js

【解决方案1】：

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

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

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

【讨论】：

你如何用对角线来做这个？
也只是补间 y 值。

【解决方案2】：

演示：http://jsfiddle.net/thpbr1vt/3/

注意！性能。

var stage = new createjs.Stage("canvas");
var vpoint = new createjs.Point( 100, 100);

var line = new createjs.Graphics();
line.beginStroke( 'cyan' );
line.moveTo( vpoint.x, vpoint.y );
var s = new createjs.Shape(line);
stage.addChild(s);

createjs.Tween.get(vpoint).to({x: 0, y: 0}, 1000, createjs.Ease.sineInOut);

createjs.Ticker.addEventListener("tick", tick);
  function tick() { 
  line.lineTo( vpoint.x, vpoint.y );
  stage.update();
}

【讨论】：

如何创建对角线？
我的例子是对角线！？