Kineticjs 'mouseover' 补间工作正常,但 'mouseout' 补间工作不正常
-
21-12-2019 - |
题
我目前正在尝试制作它,以便当您将鼠标悬停在三角形网格上时,三角形网格将展开并移动到“顶部”层,但是当您将鼠标移出它们时,它会缩小回原始大小并移回原始层。但是现在只有鼠标悬停功能可以正常工作。
这是我正在使用的当前代码:
var stage = new Kinetic.Stage({
container: 'container',
width: 300,
height: 300
});
var layer = new Kinetic.Layer();
var secondLayer = new Kinetic.Layer();
var tri = new Kinetic.RegularPolygon({
x: stage.width()/2,
y: stage.height()/2,
sides: 3,
radius: 30,
fill: '#111111',
closed: true,
shadowColor: '#5febff',
shadowBlur: 5,
shadowOpacity: 0.18,
});
layer.add(tri);
stage.add(layer);
stage.add(secondLayer);
// bind stage handlers
layer.on('mouseover', function(evt) {
var shape = evt.targetNode;
shape.moveTo(secondLayer);
stage.draw()
var tween = new Kinetic.Tween({
node: shape,
duration: 0.05,
scaleX: 1.5,
scaleY: 1.5
});
tween.play()
});
secondLayer.on('mouseout', function(evt) {
var shape = evt.targetNode;
var tween = new Kinetic.Tween({
node: shape,
duration: 0.05,
scaleX: 1.5,
scaleY: 1.5
});
tween.reverse()
shape.moveTo(layer);
stage.draw();
});
这是一个jsfiddle: http://jsfiddle.net/y2C3Z/1/
解决方案
您可以使用
tween.reverse()
仅在那之后tween.play()
. 。因此,您只需将比例属性更改为原始值即可。当形状位于补间下时,请勿在层之间移动形状。补间完成后您可以移动形状。
不隶属于 StackOverflow