kineticJS按順序加載圖像（並設置fillPatternImg）不透明補間不起作用

Question

我正在用KineticJS創建一個創建多個節點（RegularPolygons）的小應用程序。加載舞臺後（用play();觸發），我用（圖案）圖像順序填充每個節點（用loadImages(urls);觸發。

這工作正常，像：

集中的所有節點>加載單個圖像>設置節點patternImage>吐溫不透明0.8>吐溫完整，負載下一個圖像（重複）

出於某種原因，補間不會玩，他們只是。 （不透明度1）;（

var stage = new Kinetic.Stage({ 
    container: 'canvas', 
    width: $(window).width(), 
    height: $(window).height() 
}); 

var layer = new Kinetic.Layer() 
var layer2 = new Kinetic.Layer() 
var urls = 
[ 
    'http://lorempixel.com/300/300/sports/1', 
    'http://lorempixel.com/300/300/sports/2', 
    'http://lorempixel.com/300/300/sports/3', 
    'http://lorempixel.com/300/300/sports/4', 
    'http://lorempixel.com/300/300/sports/5', 
    'http://lorempixel.com/300/300/sports/6', 
    'http://lorempixel.com/300/300/sports/7', 
    'http://lorempixel.com/300/300/sports/8', 
    'http://lorempixel.com/300/300/sports/9', 
    'http://lorempixel.com/300/300/sports/10', 
    'http://lorempixel.com/300/300/business/1', 
    'http://lorempixel.com/300/300/business/2', 
    'http://lorempixel.com/300/300/business/3', 
    'http://lorempixel.com/300/300/business/4', 
    'http://lorempixel.com/300/300/business/5', 
    'http://lorempixel.com/300/300/business/6', 
    'http://lorempixel.com/300/300/business/7', 
    'http://lorempixel.com/300/300/business/8', 
    'http://lorempixel.com/300/300/business/9', 
    'http://lorempixel.com/300/300/business/10'/*, 
    'http://lorempixel.com/300/300/cats/1', 
    'http://lorempixel.com/300/300/cats/2', 
    'http://lorempixel.com/300/300/cats/3', 
    'http://lorempixel.com/300/300/cats/4', 
    'http://lorempixel.com/300/300/cats/5', 
    'http://lorempixel.com/300/300/cats/6', 
    'http://lorempixel.com/300/300/cats/7', 
    'http://lorempixel.com/300/300/cats/8', 
    'http://lorempixel.com/300/300/cats/9', 
    'http://lorempixel.com/300/300/cats/10', 
    'http://lorempixel.com/300/300/nature/1', 
    'http://lorempixel.com/300/300/nature/2', 
    'http://lorempixel.com/300/300/nature/3', 
    'http://lorempixel.com/300/300/nature/4', 
    'http://lorempixel.com/300/300/nature/5', 
    'http://lorempixel.com/300/300/nature/6', 
    'http://lorempixel.com/300/300/nature/7', 
    'http://lorempixel.com/300/300/nature/8', 
    'http://lorempixel.com/300/300/nature/9', 
    'http://lorempixel.com/300/300/nature/10', 
    'http://lorempixel.com/300/300/people/1', 
    'http://lorempixel.com/300/300/people/2', 
    'http://lorempixel.com/300/300/people/3', 
    'http://lorempixel.com/300/300/people/4', 
    'http://lorempixel.com/300/300/people/5'*/ 
]; 

// LOAD IMAGES 
function loadImages(arrayOfImages, index) { 

index = index || 0; 

if (arrayOfImages && arrayOfImages.length && arrayOfImages.length > index) { 
    var img = new Image(); 
    img.onload = function() { 

     var pane = layer2.get('#pane_' + index);    
     pane.fill('').fillPatternImage(img); 
     stage.draw(); // <<< THIS WORKS 

     var tween = new Kinetic.Tween({ 
     node: pane, 
     duration: 1, 
     opacity: 0.8, 
     easing: Kinetic.Easings.BackEaseOut, 
     onFinish: function() { 
      loadImages(arrayOfImages, index + 1 
      } 
     }).play; // <<< NOT WORKING 

     //setTimeout(function(){ loadImages(arrayOfImages, index + 1); }, 200); 

    }; 
    img.src = arrayOfImages[index]; 
} 

} 

function start() { 

console.log("numOfPanes: " +urls.length); 

for (i = 0; i <= urls.length; i++) { 

    var shape0 = new Kinetic.RegularPolygon({ 
     x: i * 15, 
     y: i * 15, 
     sides: 5, 
     rotation: i * 10, 
     radius: 70, 
     fill: 'Red' 
    }); 

    var shape1 = new Kinetic.RegularPolygon({ 
     x: i * 15, 
     y: i * 15, 
     sides: 5, 
     rotation: i * 10, 
     radius: 70, 
     opacity: 0, 
     fillPatternOffset: {x:-220, y:70}, 
     id: 'pane_' + i, 
     name: 'pane', 
     fill: 'Green' 
    }); 

    layer.add(shape0); 
    layer2.add(shape1); 

} 

stage.add(layer,layer2); 

} 

// INIT 
start(); 

// trigger loadimages() with console 
loadImages(urls); 

Answer 1

play是一個函數。所以你應該叫它。

var tween = new Kinetic.Tween({ 
    node: pane, 
    duration: 1, 
    opacity: 0.8, 
    easing: Kinetic.Easings.BackEaseOut, 
    onFinish: function() { 
     loadImages(arrayOfImages, index + 1 
     } 
    }).play(); 

另外：當你與get功能找到節點返回Collection。所以如果你只需要節點使用：

var pane = layer2.get('#pane_' + index)[0];