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

这是因为您没有设置初始不透明度。您所做的是将不透明度从1设置为1，而不是从0设置为1.请参阅以下代码。

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

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

使用Kineticjs在settimeout之后加载背景图像中的淡入淡出

1 个答案: