我正在使用类名和动画找到 Raphael 对象，但根本不起作用

Posted 2023-05-08

【中文标题】我正在使用类名和动画找到 Raphael 对象，但根本不起作用

【英文标题】：I am finding Raphael object using class name and animating, but not work at all

【发布时间】：2012-10-25 09:46:50

【问题描述】：

我有 2 个圆圈，单击大圆圈我正在使用类名找到小圆圈并尝试为小圆圈设置动画，但根本不起作用。

但fadeId、fadeOut 属性正在工作。

我的功能：

var paper = new Raphael('myPaper',500,500);
var circle = paper.circle(100,100,100).attr('fill':'red');
circle.node.setAttribute('class','red');
var text = paper.text(100,100,"test Text").attr('fill':'#fff');

var smallCircle = paper.circle(300,100,50).attr('fill':'green').data('id','green');
smallCircle.node.setAttribute('class','green'); 

var newSet = paper.set();

newSet.push(circle,text);

newSet.attr(cursor:'pointer').data('id','oval');

$('.red').on('click',function ()    
    $('.green').animate('cx':200,5000); //animation not working.
 )

​

jsfiddle here

【问题讨论】：

您的代码没有click 处理程序或使用fadeIn 或fadeOut？

我没有要动画的东西，所以我决定通过 qQuery 来做。 fadeIn 和 fadeOut 使用相同的代码

【参考方案1】：

如果您想使用 Raphael 制作动画，您需要获取元素的 Raphael 对象，而不是 jQuery 对象。为此，您需要从元素中获取 raphaelid 属性，然后使用画布的 getById 方法。

paper.getById($('.green')[0].raphaelid).animate('cx': 200, 5000);

---

如果您有多个元素，您可能只需循环遍历每个元素并为其设置动画。

var anim = Raphael.animation('cx': 200, 5000);
$('.green').each(function() 
    paper.getById(this.raphaelid).animate(anim);

【讨论】：

你的想法没问题。但我在页面中没有绿色类，我需要为所有动画制作.. 有可能吗？

您可能只需遍历所有元素并为每个元素设置动画，请参阅我编辑的答案。

【参考方案2】：

animate() 仅更改元素的样式属性，据我所知。

但是，您可以使用带有 animate 的 step 函数来连接它来更改其他内容：jQuery animate of custom value (not a CSS property)

【参考方案3】：

您似乎正试图在 DOM SVG 对象上调用 animate。您需要将 raphael 引用动画化到绿色圆圈，而不是类。

newSet.click(function ()    
    smallCircle.animate('cx':200,5000); //animation not working.
 )

http://jsfiddle.net/Amb9b/8/