kineticJS 연속적으로 이미지로드 (및 fillPatternImg 설정) 불투명 트위닝이 작동하지 않음

Question

여러 개의 노드 (RegularPolygons)를 만드는 KineticJS로 작은 앱을 만들었습니다. 스테이지가로드 된 후 (play();으로 트리거 됨) 각 노드를 순차적으로 패턴으로 채 웁니다 (loadImages(urls);으로 트리거 됨)

이 작업은 정상적으로 작동하지만 이제는 Tween으로 멋진 페이드 인 효과를 추가하고 싶습니다. 같은 :

세트는 모든 노드> 부하 하나의 이미지> 설정 노드 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];