在每個（）中應用補間，我如何使用reverse（）？

Question

讓我們假設我申請補間的每個元素在我的畫布

elements.each(function (element) { 
    new Kinetic.Tween({ 
     node: element, 
     rotationDeg: 180 
    }).play(); 
}); 

所有項目都已進行補間，從他們的原始狀態已經傳遞到最終狀態。我的問題是：如何應用reverse（）將每個項目恢復到原始狀態？

Answer 1

存儲陣列內的補間，然後遍歷數組，並使用.reverse()

elements = stage.get('Rect'); 
    var tweenArray = []; 

    // reverse tween 
    document.getElementById('reverse').addEventListener('click', function() { 
     for (var i=0; i<tweenArray.length; i++) { 
      tweenArray[i].reverse(); 
     } 
    }, false); 

    // play tween forward 
    document.getElementById('play').addEventListener('click', function() { 
     elements.each(function (element) { 
      var tween = new Kinetic.Tween({ 
       node: element, 
       rotationDeg: 180 
      }).play(); 
      tweenArray.push(tween); 
     }); 
    }, false); 

jsfiddle