我正在使用梦幻般的KineticJS JavaScript框架来做一些插图。
我的插图中有一些Tweens用于一些时髦的过渡。
我的问题是我正在尝试顺畅地将Kinetic.Line()对象移动到插图中。
KineticJS的DOCS说你可以使用补间来转换“形状的任何数字属性”。我知道Kinetic.Line()
对象中的Points不是数字,它是一个对象属性。
有没有办法访问补间中使用的kLine_MovingLine.attrs.points[0].x
。
我的台词非常简单。他们只有两个点(From和To点)。
答案 0 :(得分: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