Question

我对Canvas来说真的很陌生，我现在正在使用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);
});
});

动画Canvas Shape的X和Y参数

1 个答案: