javascript - 使用帧计时器的 Raphaël 动画

Question

我目前正在从 Raphaël 开始，我很难弄清楚如何使用带计时器的帧以灵活的方式制作动画。

使用 KineticJS，这非常容易。我所需要的只是写一些类似的东西:

var anim = new Kinetic.Animation(function(frame){
  circle.setSomeAttribute(someFunction(frame.time));
}, layer);
anim.start();

这样我实际上可以在 someFunction() 中放入任何我想要的东西，并且可以更好地控制随时间传递给属性的值。无论如何，我可以通过 Raphaël 轻松做到这一点吗？

谢谢:)

Answer 1

RaphaelJS 可以让您按百分比分解动画步骤。例如:

    gear.stop().animate({
        "0%": { transform: gear.__start },
        "20%": { transform: gear.__start + ' r' + gear.__dir + '180'},
        "40%": { transform: gear.__start + ' r0'},
        "80%": { transform: gear.__start + ' r' + gear.__dir + '180'},
        "100%": { transform: gear.__start + ' r0'},
    }, 3000 );

据我所知，这将绕过宽松政策。无论如何，请参阅http://jsfiddle.net/Cy8DQ/一个工作示例。