停止動畫，使用KineticJS在mousedown上增加圓弧半徑

這是我的第一個問題，所以如果您需要任何其他信息，請讓我知道。停止動畫，使用KineticJS在mousedown上增加圓弧半徑

所以我的目標是能夠點擊移動的圓圈並停止移動，並且在鼠標按鈕關閉的情況下，它的半徑會穩定增加（如膨脹的氣球）。目前我擁有它，所以當鼠標停下來時半徑擴大了1倍，然後一旦鼠標上升，它就會變得瘋狂（我希望它隨着鼠標向上移動時保持新的半徑）。

這裏是我的代碼：

HTML

<html> 
    <head> 
    <meta> 
    <link rel="stylesheet" type="text/css" href="styles/main.css" /> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.6.0.min.js"></script> 
</head> 
    <body> 
    <div id="wrapper">  
     <div id="stage"></div> 
    </div> 
    <script type="text/javascript" src="scripts/main.js"></script> 
    </body> 
</html>

CSS

#wrapper{ 
    margin: 10% auto; 
    width: 900px; 
    text-align: center; 
} 
#stage{ 
    border: 1px solid black; 
    display: block; 
}

的Javascript

var circlevx = 5; 
var circlevy = 5; 
var runAnimation = true; 
/******************************* 
setting up the stage/layers 
********************************/ 
window.onload = function(){ 
    var stage = new Kinetic.Stage({ 
     container : 'stage', 
     width : 900, 
     height : 600 
    }); 
    var shapesLayer = new Kinetic.Layer(); 

    /********************************** 
     creating the circle object 
    *************************************/ 
    var circle = new Kinetic.Circle({ 
     x : stage.getWidth()/2, 
     y : stage.getHeight()/2, 
     radius : 50, 
     fill : 'grey', 
     stroke : 'black', 
     strokeWidth : 1 
    }); 


    /************************************* 
     add the circle to the stage 
    **************************************/ 
    //bindingBox.add(circle); 
    shapesLayer.add(circle); 
    stage.add(shapesLayer); 

    var date = new Date(); 
    var time = date.getTime(); 
    animate(time, circle, runAnimation); 
} 

window.requestAnimFrame = (function(callback){ 
    return window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame || 
    window.oRequestAnimationFrame || 
    window.msRequestAnimationFrame || 
    function(callback){ 
     window.setTimeout(callback, 1000/60); 
    }; 
})(); 


function animate(lastTime, circle, runAnimation){ 
    if(runAnimation) {  
     var stage = circle.getStage(); 
     var shapesLayer = circle.getLayer(); 
     var date = new Date(); 
     var time = date.getTime(); 
     var timeDiff = time - lastTime; 

     // update 
     updateCircle(timeDiff, circle); 

     // draw 
     shapesLayer.draw(); 

     // request new frame 
     requestAnimFrame(function(){ 
      animate(time, circle, runAnimation); 
     }); 
    } 
} 

function updateCircle(timeDiff, circle){ 
    var stage = circle.getStage().attrs; 
    var circleX = circle.attrs.x; 
    var circleY = circle.attrs.y; 
    var circleRadius = circle.attrs.radius; 
    var newRadius = circleRadius + 2; 
    circleX += circlevx; 
    circleY += circlevy; 
    //console.log(stage); 

    //throw 'aarg'; 
    // ceiling condition 
    if (circleY < circleRadius) { 
     circleY = circleRadius; 
     circlevy *= -1; 
    } 

    // floor condition 
    if (circleY > (stage.height - circleRadius)) { 
     //console.log('bottom'); 
     circleY = stage.height - circleRadius; 
     circlevy *= -1; 
    } 

    // right wall condition 
    if (circleX > (stage.width - circleRadius)) { 
     circleX = stage.width - circleRadius; 
     circlevx *= -1; 
    } 

    // left wall condition 
    if (circleX < (circleRadius)) { 
     circleX = circleRadius; 
     circlevx *= -1; 
    } 

    circle.setPosition(circleX, circleY); 
    // 
    circle.on('mousedown', function(){ 
     runAnimation = false; 
     circle.setRadius(newRadius); 
    }); 
    circle.on('mouseup', function(){ 
     runAnimation = true; 
     if(runAnimation) { 
      var date = new Date(); 
      var time = date.getTime(); 
      animate(time, circle, runAnimation); 
     }  
     console.log('mouseout'); 

    }); 
}

來源

2013-08-31 user2735928

可以使用動力學吐溫控制擴張你「氣球」

首先，聲明動力學氣球對象上這些有用的附加屬性：

balloon.X=150; 
    balloon.Y=150; 
    balloon.VX=0.50; 
    balloon.VY=0.50; 
    balloon.RAF; 
    balloon.tw;

氣球mousedown取消移動動畫，並開始補間囊展開：

如果再次按下鼠標，您可以繼續展開氣球。

balloon.on("mousedown",function(){ 
     cancelAnimationFrame(this.RAF); 
     this.tw=new Kinetic.Tween({ 
      node:this, 
      duration:3, 
      radius:100 
     }); 
     this.tw.play(); 
    });

然後在mouseup，暫停通貨膨脹吐溫並重新啓動移動動畫：

氣球將保留其擴大規模。

注意：如果您將鼠標放下並移出氣球以釋放鼠標，則不會調用此mouseup，即使鼠標已啓動，氣球仍將繼續展開。

balloon.on("mouseup",function(){ 
     this.tw.pause(); 
     this.move(); 
    });

這裏是英國皇家空軍的動畫功能加入到氣球對象做氣球運動：

balloon.move=function(){ 

     // calc new balloon position 
     this.X+=this.VX; 
     this.Y+=this.VY; 

     // reverse if colliding 
     var r=this.getRadius(); 
     if(this.X<r){ this.VX*=-1; this.X=r; } 
     if(this.X>stageWidth-r){ this.VX*=-1; this.X=stageWidth-r; } 
     if(this.Y<r){ this.VY*=-1; this.Y=r; } 
     if(this.Y>stageHeight-r){ this.VY*=-1; this.Y=stageHeight-r; } 

     // set the new balloon position 
     this.setPosition(this.X,this.Y); 
     layer.draw(); 

     // request a new animation loop 
     var b=this; 
     this.RAF=requestAnimationFrame(function(){ b.move();}); 
    }

這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/D7Ndc/

<!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.5.5.min.js"></script> 

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

    var stageWidth=300; 
    var stageHeight=300; 

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

    // create a balloon object 
    var balloon = new Kinetic.Circle({ 
     x: 150, 
     y: 150, 
     radius: 20, 
     fill: 'skyblue', 
     stroke: 'lightgray', 
     strokeWidth: 3, 
    }); 
    balloon.X=150; 
    balloon.Y=150; 
    balloon.VX=0.50; 
    balloon.VY=0.50; 
    balloon.RAF; 
    balloon.move=function(){ 

     // calc new balloon position 
     this.X+=this.VX; 
     this.Y+=this.VY; 

     // reverse if colliding 
     var r=this.getRadius(); 
     if(this.X<r){ this.VX*=-1; this.X=r; } 
     if(this.X>stageWidth-r){ this.VX*=-1; this.X=stageWidth-r; } 
     if(this.Y<r){ this.VY*=-1; this.Y=r; } 
     if(this.Y>stageHeight-r){ this.VY*=-1; this.Y=stageHeight-r; } 

     // set the new balloon position 
     this.setPosition(this.X,this.Y); 
     layer.draw(); 

     // request a new animation loop 
     var b=this; 
     this.RAF=requestAnimationFrame(function(){ b.move();}); 
    } 
    balloon.tw; 
    balloon.on("mousedown",function(){ 
     cancelAnimationFrame(this.RAF); 
     this.tw=new Kinetic.Tween({ 
      node:this, 
      duration:3, 
      radius:100 
     }); 
     this.tw.play(); 
    }); 
    balloon.on("mouseup",function(){ 
     this.tw.pause(); 
     this.move(); 
    }); 

    layer.add(balloon); 

    balloon.move(); 

    layer.draw(); 

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

</script>  
</head> 

<body> 
    <div id="container"></div> 
</body> 
</html>

來源

2013-08-31 17:52:33 markE

行之有效，謝謝！你有什麼想法如何讓圓圈停止移動，直到觸發鼠標上升爲止？目前我點擊該圈子，並且不停地擴展到100。 – user2735928

我已添加到我的答案包括一個移動氣球的動畫。當鼠標停在氣球上時停止動畫。 – markE

非常感謝，這絕對給我更多的工作！ – user2735928

停止動畫，使用KineticJS在mousedown上增加圓弧半徑

回答

相關問題