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

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, 
})