動畫效果的X和Y帆布的參數形狀

Question

我真正的新畫布，和我目前使用的oCanvas插件，以實現一個類似的在這裏的影響：http://www.meetgraham.com.au/view-graham

到目前爲止，這是怎麼回事好。不過，我需要動畫橢圓變大，並在畫布第一次點擊時移動到鼠標位置。我已經通過使用jQuery .animate();爲形狀的radius設置動畫，從而按照預期增加了橢圓。但是，它似乎沒有與x和y參數一起工作 - 有誰知道我可以如何爲那些移動到當前鼠標位置設置動畫？

這裏是我的代碼：

var ellipseStroke = canvas.display.ellipse({ 
x: 10, 
y: 10, 
radius: 50, 
stroke: "10px #fff" 
}); 
var ellipse = canvas.display.ellipse({ 
x: 10, 
y: 10, 
radius: 50, 
fill: "white", 
composition:"destination-atop" 
}); 

// Add circle to the canvas 
canvas.addChild(ellipseStroke); 
canvas.addChild(ellipse); 

//Define the Seymour variable to determine whether the user has clicked the canvas or not. 
var seymour = false; 
$('#canvas').click(function(){ 
ellipse.animate({ 
     radius: 150, 
     x: 200, 
     y: 200, 
    },1000); 
    ellipseStroke.animate({ 
     radius: 150, 
     x: 200, 
     y: 200, 
    },1000); 
    seymour = true; 
}); 

`

Answer 1

我已經解決了這個問題。

事實證明，我使用的是非常棒的oCanvas庫，使用它可以非常容易地爲數值屬性製作動畫。

//Define the Seymour variable to determine whether the user has clicked the canvas or not. 
var seymour = false; 
canvas.bind("click tap",function(){ 
    ellipse.animate({ 
    y: canvas.mouse.y, 
    x: canvas.mouse.x, 
    radius: 150 
}, { 
    easing: "ease-in-out-cubic" 
}); 
ellipseStroke.animate({ 
    y: canvas.mouse.y, 
    x: canvas.mouse.x, 
    radius: 150 
}, { 
    easing: "ease-in-out-cubic", 
    callback:function(){ 
     seymour = true; 
    } 
}); 
$('#canvas').click(function(){ 
    $('#canvas-sleeve').show("slide", { direction: "left" }, 1000); 
}); 
});