これは私の最初の質問です。追加情報が必要な場合はお知らせください。
したがって、私の目標は、移動する円をクリックしてその動きを停止し、マウスボタンを押している間、その半径を着実に増加させることです (膨張する風船のように)。現在、マウスを離すと半径が 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');
});
}