Question

我试图将对象旋转一个可变的度数来表示一个表盘。作为第一步，我尝试执行以下操作：

window.onload = function() {  
    var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);  
    var circle = paper.circle(100, 100, 80);  
var arrow = paper.path("M 100 100 l -56.5 56.5 z"); 
    arrow.attr({stroke: '#0a0', 'stroke-width': 3});

    for(var i=0;i<=100; i+=1){
         rotate_cw(arrow);
    }

}  

function rotate_cw (element){
element.animate({transform:"r-1,100,100"}, 10); 
}

动画本身可以工作，但我无法使用外部函数。任何解决方案或解决方法？

Answer 1

您的代码正常运行 - 动画正在发生且功能正常运行 - 但它不会像一样，因为它有两个原因：

Raphael变换是绝对的，而不是相对的。因此，它旋转到一度，然后旋转到相同的位置。你没有告诉它将旋转一次100度，你告诉它将旋转到一度100次。
- 通过跟踪旋转位置并递增它来解决此问题。
for循环恰好发生，或多或少瞬间发生。因此，在解决了第一个问题之后，你会发现动画只是跳到最后，不管10毫秒的延迟，因为它们都或多或少同时被调用。它在几乎1毫秒的空间内调用该函数100次，每个函数调用需要10 ms来设置动画，因此它在不到11毫秒的时间内达到了第100次旋转的结束 - 而不是你想要的1000毫秒。
- 通过调用Raphael的animate回调参数

这是一个我认为更像你所希望的例子：

当传递给循环中的函数时，Raphael元素不会变换

1 个答案:

http://jsbin.com/oxufuh/1/edit