Question

我正在使用梦幻般的KineticJS JavaScript框架来做一些插图。

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

我的问题是我正在尝试顺畅地将Kinetic.Line（）对象移动到插图中。

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

我的台词非常简单。他们只有两个点（From和To点）。

Answer 1

你仍然可以通过更改它的属性来补间任何形状之间的线！

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

移动带有过渡的KineticJS线

1 个答案: