A interpolação 'mouseover' do Kineticjs está funcionando, mas a interpolação 'mouseout' não está
-
21-12-2019 - |
Pergunta
No momento, estou tentando fazer com que uma grade de triângulos se expanda e se mova para a camada 'superior' quando você passa o mouse sobre eles, mas depois diminui para o tamanho original e volta para a camada original quando você passa o mouse fora deles.No entanto, no momento, apenas a função de passar o mouse está funcionando corretamente.
Aqui está o código atual com o qual estou trabalhando:
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();
});
E aqui está um jsfiddle: http://jsfiddle.net/y2C3Z/1/
Solução
Você pode usar
tween.reverse()
só depoistween.play()
.Portanto, você pode simplesmente alterar os atributos de escala para os valores originais.Não mova a forma entre camadas enquanto a forma está sob uma interpolação.Você pode mover a forma após a conclusão da interpolação.