kineticJS按顺序加载图像(并设置fillPatternImg）不透明度补间不起作用

我正在使用KineticJS创建一个创建多个节点（RegularPolygons）的小应用程序。加载阶段（用play();触发）后，我按顺序用（模式）图像填充每个节点（用loadImages(urls);触发。

这工作正常，但现在我想用补间添加一个漂亮的淡入效果，例如：

设置所有节点>加载单个图像>将节点模式补间>图像设置为不透明度 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);