Javascript 拉法ë；l使用帧定时器的动画

我现在从Raphaël开始，我很难想出如何使用带计时器的帧以灵活的方式制作动画

使用KineticJS，这非常简单。我所需要的只是写一些东西，比如：

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

这样，我实际上可以将我想要的任何东西放入

someFunction（）

中，并且可以更好地控制随时间传递给属性的值。有没有什么方法可以让我轻松地用拉斐尔做到这一点

---

谢谢：）

不完全确定您的要求，但您可能只想定义自己的缓解公式

Raphael.easing_formulas.myEasingFormula = function(n) { 
        //n is fraction of time elapsed
        return myOperationOn(n);    
    };

---

如果没有一种烘焙放松方法能够满足您的需求，那么您就很容易自己制作。你可以在拉斐尔中看到标准测量的公式。您只是返回一个新的分数值以应用于所选元素上的变换。

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

---

这将绕开宽松政策。无论如何，请看一个有效的例子。

我相信每一个与拉斐尔共度时光的人都有机会发现，拉斐尔的道路远远不够。我在这里看到了一些很好的解决方法，所以（这是最全面的）。总之，没有现成的好办法

我通常使用此实用程序功能（如果您觉得这样的打包更方便，可以轻松转换为Raphael插件）：

您可以使用它来逐渐“绘制”一条几乎无限复杂的线。Firefox仍然不够快，无法实时计算复杂的路径，但Chrome很棒，而且仍然支持VML

---

查看一些我的应用程序和。

从未使用过Raphael，但快速查看了文档，似乎Raphael有更多css风格的动画，您可以定义动画，然后启动/停止它。如果你想要更多的帧第二排序的事情。也许你应该看看一个更js的做事方式，这篇文章可能会帮助你。。。。知道这件事很有趣。不幸的是，在这种非常特殊的情况下，它没有帮助，因为我对使用

animate（）

生成的转换不满意（它选择了到达目标的最短路径）。实际上，我想做的是随着时间的推移将子路径的长度从原始长度的0%更改为100%。因此，只需按照计时器更改子路径就很容易了。@TKrugg:Easing只会让您控制时间，但要影响路径，您可以这样做。代替“20%”：{transform:…}，您可以执行“20%”：{path:“…”}——这将设置从步骤1到步骤2的路径的动画。@pp19dd——我的另一个+1。那把小提琴真是太棒了。我终于想出办法了。我不得不改变整个方法，以拉斐尔的方式思考动画。你的例子真的很有帮助。谢谢：）正如我在前面的评论中所说的，我对

animate（）

所做的工作不满意，不幸的是，更改宽松效果没有帮助。除此之外，这个功能看起来非常有趣。谢谢：）

function drawpath( canvas, pathstr, duration, attr, callback )
{
    var guide_path = canvas.path( pathstr ).attr( { stroke: "none", fill: "none" } );
    var path = canvas.path( guide_path.getSubpath( 0, 1 ) ).attr( attr );
    var total_length = guide_path.getTotalLength( guide_path );
    var last_point = guide_path.getPointAtLength( 0 );
    var start_time = new Date().getTime();
    var interval_length = 50;
    var result = path;        

    var interval_id = setInterval( function()
    {
        var elapsed_time = new Date().getTime() - start_time;
        var this_length = elapsed_time / duration * total_length;
        var subpathstr = guide_path.getSubpath( 0, this_length );            
        attr.path = subpathstr;

        path.animate( attr, interval_length );
        if ( elapsed_time >= duration )
        {
            clearInterval( interval_id );
            if ( callback != undefined ) callback();
            guide_path.remove();
        }                                       
    }, interval_length );  
    return result;
}