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

Question

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

我使用的绘图库是EaselJS and for Tweening I am using 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

演示：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();
}

Answer 2

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

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

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

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

How do you animate a line using EaselJS and TweenJS

javascript

canvas

easeljs

createjs

tween.js

动画示例：

绘制示例：