Question

我想在KineticJS中为一个矩形设置一个三态鼠标悬停。矩形以白色开始，然后鼠标悬停在矩形上将颜色更改为红色，然后启动补间和补间超过1秒到白色。另一个鼠标悬停将重复我能够使用版本4库运行的过程，但不是版本5. JsFiddle：http://jsfiddle.net/cmh600/uFFN9/12/

任何帮助非常感谢

  var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
  });
  var layer = new Kinetic.Layer();
  var rect = new Kinetic.Rect({
    x: 20,
    y: 20,
    width: 100,
    height: 50,
    fillRed: 255,
    fillGreen: 255,
    fillBlue: 255,
    stroke: 'black',
    strokeWidth: 2,
  });

  layer.add(rect);
  stage.add(layer);

    var tween = new Kinetic.Tween({
            node: rect, 
            duration: 2,
            opacity: 1,
            easing: Kinetic.Easings.Linear,
            fillRed: 255,
            fillGreen: 255,
            fillBlue: 255
          }); 

    rect.on("mouseover", function() {
        rect._setAttr('fillRed',255);
        rect._setAttr('fillGreen',0);
        rect._setAttr('fillBlue',0);
        rect.draw();
      tween.play();
    });

Answer 1

您必须在设置rect的新填充颜色后声明补间，否则，起始值将是错误的（并且它将立即转换为白色）。与KJ5合作：

rect.on("mouseover", function() {
    rect.fillBlue(0);
    rect.fillGreen(0);
    rect.draw();
    var tween = new Kinetic.Tween({
        node: rect, 
        duration: 2,
        opacity: 1,
        easing: Kinetic.Easings.Linear,
        fillRed: 255,
        fillGreen: 255,
        fillBlue: 255
    }); 
    tween.play();
});

kineticjs改变tween开始颜色

1 个答案: