1

我正在使用神奇的 KineticJS JavaScript 框架来做一些插图。

我的插图中有许多 Tweens 用于一些时髦的过渡。

我的问题是我正在尝试将 Kinetic.Line() 对象平滑地移动到插图中。

KineticJS 的文档说您可以使用补间来转换“形状的任何数字属性”。我知道Kinetic.Line()对象中的点不是数字，它是一个对象属性。有没有办法访问kLine_MovingLine.attrs.points[0].x在补间中使用的。

我的台词很简单。它们只有两个点（From 和 To 点）。

4

1 回答 1

2

您仍然可以像对任何形状进行补间一样通过更改其属性来补间一条线！

var line = new Kinetic.Line({
  x: 100,
  y: 100,
  points: [0, 0, 50, 50],
  stroke: '#FF0000'
});

var tween = new Kinetic.Tween({
  node: line,
  duration: 1,
  x: 400,
  y: 30,
  points: [100, 50, 25, 0]
});

在上面的示例中，我使用补间来更改 x、y 和 points 属性。检查这个小提琴，看看它是否按预期工作：jsfiddle

于 2013-07-22T13:25:39.857 回答