1

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

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); 
}

动画本身可以工作，但我无法使其与外部功能一起工作。任何解决方案或解决方法？

4

1 回答 1

1

您的代码有效 - 动画正在发生并且功能有效 - 但它看起来不像它有两个原因：

  • 拉斐尔变换是绝对的，而不是相对的。因此，它旋转一度，然后旋转到相同的位置。您不是在告诉它旋转1度 100 次，而是告诉它旋转1度100 次。
    • 通过跟踪旋转位置并增加它来解决这个问题。
  • for循环只是发生，或多或少是瞬间发生的。所以在你解决了第一个问题之后，你会发现动画只是跳到最后，不管 10 毫秒的延迟，因为它们都或多或少同时被调用。它在不到 1 毫秒的时间内调用了该函数 100 次，每个函数调用需要 10 毫秒的动画时间，因此它在不到 11 毫秒的时间内到达了第 100 次旋转的末尾——而不是您可能想要的 1000 毫秒。
    • animate通过在 Raphael 的回调参数中调用下一个动画来修复此问题

这是一个我认为更像您希望的示例：

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

于 2013-07-10T14:50:54.423 回答