kineticjs改变青少年的开始颜色

kineticjs change tween start color

本文关键字：开始 颜色 青少年 改变 kineticjs      更新时间：2023-09-26

我正在尝试在KineticJS中为矩形设置一个三态鼠标悬停。矩形从白色开始，然后鼠标悬停在矩形上将颜色更改为红色，然后开始一个tween，并在1秒内变为白色。另一个鼠标悬停将重复我使用版本4库而不是版本5运行该程序的过程。Js报价：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();
    });

您必须在设置rect的新填充颜色后声明tween，否则，起始值将是错误的（它将立即转换为白色）。使用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();
});
相关文章：