Question

我正在使用Raphael创建一些圈子。当用户单击按钮时，我想为这些圆圈设置动画（通过增加它们的半径）。我该怎么做？

例如，这是我的示例代码：

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">

$(function() {  
var paper = new Raphael("canvas_container", 300, 150);
paper.circle(50, 75, 30);
paper.circle(150, 75, 30);

$("button").click(function() {
    $("circle").each(function(i) {      
        this.animate({ r: 100 }, 500); // Doesn't work.
    });     
});

});
</script>
</head>

<body>
<div id="canvas_container"></div>  
<button>Click me to animate the circles</button>
</body>

</html>

[一般来说，我不清楚以下两个变量之间有什么区别：

var c = paper.circle(50, 75, 30); // Raphael circle
$("circle").first(); // using jQuery to grab that Raphael circle

jQuery对象是Raphael圈子的包装器吗？]

Answer 1

阅读Raphaël Reference，您似乎可以使用Raphaël自己的Event methods

来做到这一点

circle.click(function (event) {
    this.animate({ r: 100 }, 500);
});

文档的同一部分还指出你可以使用像jQuery这样的库，但你必须传入节点，如下所示：

$(circle.node)

其中circle是paper.circle调用返回的对象。

但是，在您的情况下，我认为以下代码将起作用：

var paper = new Raphael("canvas_container", 300, 150), 
    circles = [];

circles.push(paper.circle(50, 75, 30));
circles.push(paper.circle(150, 75, 30));

$("button").click(function() {
    $.each(circles, function(i, c){
         c.animate({ r: 100 }, 500);
    });
});

Answer 2

您的选择器“圈子”未定位任何内容 - 您没有可以定位的圈子元素。但是，你可以这样做：

circle1 = paper.circle(50, 75, 30); 
circle2 = paper.circle(150, 75, 30); 

$("button").click(function() { 
    circle1.animate({ r: 100 }, 500);
    circle2.animate({ r: 100 }, 500);
});

我无法告诉你是否可以根据半径为圆圈设置动画（），但至少可以为你提供一个jQuery对象。

如何在jquery对象上调用raphael方法？

2 个答案: