KineticJS 中的动画答案

【问题标题】：Animation in KineticJSKineticJS 中的动画
【发布时间】：2015-10-31 10:23:36
【问题描述】：

我在图层中添加了一个圆圈。在图层的顶部，我添加了一个文本。我想在鼠标悬停在圆圈上时运行动画，但是当鼠标到达文本时，会调用 mouseout 回调函数。我怎样才能防止这种情况？

var circle = new Kinetic.Circle({
    x: j * xcenterstep  + xshift,
    y: i * ycenterstep  + yshift,
    radius: t_radius,
    fill: t_fill,
    stroke: t_stroke,
    strokeWidth: t_stroke_w,
    strokeOpacity: 0.1,
    opacity: 0.3 + t_number * 0.05,                 
});
if (t_number) {
    circle.tw;
    circle.on("mouseover", function () {                    
        this.tw = new Kinetic.Tween({
            node: this,
            duration: 0.3,
            strokeWidth: 6
        });
        this.tw.play();
    });
    circle.on("mouseout", function () {
        this.tw.reverse();
    });
}

// Adding the text 
var radiusText = new Kinetic.Text({
    x : circle.getX(),
    y : circle.getY(),
    text : t_number,
    fontSize : radius,                  
    fill : '#fff',
    fontStyle: 'bold',
    align : 'center'
});
radiusText.setOffset({
    x : radiusText.getWidth()/2,    
    y : radiusText.getHeight()/2
});

bgLayer.add(circle);
bgLayer.add(radiusText);

【问题讨论】：

标签： javascript html5-canvas kineticjs

【解决方案1】：

我认为最好使用mouseenter 事件。您可以禁用文本的事件以防止mouseout 被圈出。

radiusText.listening(false)

【讨论】：

【解决方案2】：

查看您的代码，您错过了一个 } 来关闭 if (t_number) {。我不确定它是否应该包含 mouseover 和 mouseout 事件，但它可能会导致您的代码响应与您的预期不同。

【讨论】：

谢谢，那只是复制错误。