javascript - Kineticjs 'mouseover' tween is working but 'mouseout' tween is not -
i trying make grid of triangles expand , move 'top' layer when mouse on them, shrink down original size , move original layer when mouse out of them. right mouse on function working correctly.
here current code im working with:
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(); });
and here jsfiddle: http://jsfiddle.net/y2c3z/1/
you can use
tween.reverse()
aftertween.play()
. can change scale attributes original values.don't move shape between layers while shape under tween. can move shape after tween done.
Comments
Post a Comment