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

最简单的方法是使用Graphics命令。 .command属性返回上次创建的图形命令，然后您可以使用补间：

进行操作

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

以下是一个有效的例子：https://jsfiddle.net/gskinner/17Lk8a9s/1/

Answer 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();
}

如何使用EaselJS和TweenJS

动画示例：

绘制示例：

2 个答案: