kinetic.js 동일한 애니메이션 루프에서 두 트윈

애니메이션 루프에 트윈이있는 버그가 있다고 생각합니다.kinetic.js 동일한 애니메이션 루프에서 두 트윈

동일한 루프에 두 개의 트윈을 만들고 두 번째를 실제로 재생하면 작동합니다.

첫 번째 개체에 적용되지 및/또는 재생되지 않습니다.

별도의 레이어를 사용해 보았습니다. 배열에 모든 트윈을 넣으려고 시도했지만 배열에 개체를 넣으려고했습니다.

동일한 애니메이션 루프에서 생성 된 두 개의 트윈은 작동하지 않습니다.

출처

2014-02-07 Rob

애니메이션 루프는 조절하지 않으면 초당 약 60 회 실행됩니다.

애니메이션 루프 내부에서 반복적으로 tween.play()를 반복하지 않는 것이 중요합니다.

tween.play()는 초당 1 회 60 회만 반복해서 실행해야합니다.

다음은 애니메이션 루프 내에서 시작되어 성공적으로 재생되는 2 개의 트윈의 예입니다.

참고 : 아래 코드에서 boostersway 변수는 트윈이 한 번만 재생되도록하기 위해 사용됩니다.

데모 : http://jsfiddle.net/m1erickson/E4MUz/

enter image description here

코드 :

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script> 

<style> 
body{padding:20px;} 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:350px; 
    height:350px; 
} 
</style>   
<script> 
$(function(){ 

    var imageURLs=[]; // put the paths to your images here 
    var imagesOK=0; 
    var imgs=[]; 
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/Shuttle.png"); 
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/ShuttleBoosterRed.png"); 
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/ShuttleBoosterPurple.png"); 
    loadAllImages(start); 

    function loadAllImages(callback){ 
     for (var i=0; i<imageURLs.length; i++) { 
      var img = new Image(); 
      imgs.push(img); 
      img.onload = function(){ 
       imagesOK++; 
       if (imagesOK>=imageURLs.length) { 
        callback(); 
       } 
      }; 
      img.onerror=function(){alert("image load failed");} 
      img.crossOrigin="anonymous"; 
      img.src = imageURLs[i]; 
     }  
    } 

    function start(){ 

     // the imgs[] array holds fully loaded images 
     // the imgs[] are in the same order as imageURLs[] 

     shuttle.setImage(imgs[0]); 
     boosterLeft.setImage(imgs[1]); 
     boosterRight.setImage(imgs[2]); 
     layer.draw(); 
     animation.start(); 

    } 


    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 350, 
     height: 350 
    }); 
    var layer = new Kinetic.Layer(); 
    stage.add(layer); 


    var boosterLeft= new Kinetic.Image({ 
     x:stage.getWidth()/2-28, 
     y:stage.getHeight()-128, 
     width:16, 
     height:128, 
     image:null, 
    }); 
    layer.add(boosterLeft); 

    var boosterRight= new Kinetic.Image({ 
     x:stage.getWidth()/2+10, 
     y:stage.getHeight()-128, 
     width:16, 
     height:128, 
     image:null, 
    }); 
    layer.add(boosterRight); 

    var shuttle= new Kinetic.Image({ 
     x:stage.getWidth()/2-72/2, 
     y:stage.getHeight()-122, 
     width:72, 
     height:122, 
     image:null, 
    }); 
    layer.add(shuttle); 

    var boostersAway=false; 

    var animation = new Kinetic.Animation(function(frame) { 
    console.log(boosterLeft.getY());    

     var shuttleY=shuttle.getY(); 
     shuttle.setY(shuttleY-1); 

     if(shuttleY>150){ 
      boosterLeft.setY(boosterLeft.getY()-1); 
      boosterRight.setY(boosterRight.getY()-1); 
     } else{ 
      if(!boostersAway){ 
       boostersAway=true; 
       tweenLeft.play(); 
       tweenRight.play(); 
      } 
     } 

     if(shuttleY<-122){animation.stop();} 

    }, layer); 

    var tweenLeft = new Kinetic.Tween({ 
     node: boosterLeft, 
     duration: 3, 
     offsetX:100, 
     offsetY: -200, 
     rotation: -20*Math.PI/180, 
    }); 

    var tweenRight = new Kinetic.Tween({ 
     node: boosterRight, 
     duration: 3, 
     offsetX:-100, 
     offsetY: -200, 
     rotation: 20*Math.PI/180, 
    }); 


}); // end $(function(){}); 

</script>  
</head> 

<body> 
    <h4>2 Tweens started+playing in an animation loop.<br> 
    The red and purple boosters are separate tweens<br> 
    The animation moves the main shuttle.</h4> 
    <div id="container"></div> 
</body> 
</html>

출처

2014-02-08 18:58:30 markE

kinetic.js 동일한 애니메이션 루프에서 두 트윈

답변

관련 문제