fadein - 使用 Kineticjs 设置超时后加载背景图像淡入淡出

Question

是否可以在设定的时间后通过图像淡入来更改背景？我正在使用以下代码，但图像没有淡入。我现在要做的就是使用 transitionTo 方法淡出图像，但是我希望它淡入。这是我正在玩的代码：

var stage = new Kinetic.Stage({
    container: 'container',
    width: 1770,
    height: 900
  });
  var layer = new Kinetic.Layer();

  var imageObj = new Image();
  imageObj.onload = function() {
    var myBg = new Kinetic.Image({
     x: 0,
      y: 0,
      image: imageObj,
      width: 1770,
      height: 900
    });

    // add the shape to the layer
    layer.add(myBg);

    // add the layer to the stage
    stage.add(layer);
setTimeout(function() {
    myBg.transitionTo({
      opacity: 0,
      duration: 4,
    });
  }, 3000);

  };
  imageObj.src = 'bg.png';

有人可以解释一下吗？

Answer 1

It happens because you did not set initial opacity. What you were doing is setting opacity from 1 to 1, not from 0 to 1. please refer the following code.

var myBg = new Kinetic.Image({
  x: 0,
  y: 0,
  image: imageObj,
  opacity: 0,
  width: 1770,
  height: 900
});

myBg.transitionTo({
  opacity: 1,
  duration: 4,
})