Question

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

使用KineticJS，这非常容易。我所需要的只是写下：

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

这样我实际上可以在someFunction()内放置任何我想要的东西，并且可以更好地控制随时间传递给proprety的值。无论如何，我可以用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 );

这将绕过宽松，AFAIK。无论如何，请参阅http://jsfiddle.net/Cy8DQ/了解工作示例。

Answer 2

不完全确定你在问什么，但你可能只想定义自己的缓和公式。

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

如果没有任何烘焙的缓和方法满足您的需求，那么您可以轻松制作自己的方法。您可以在Raphael here in the source中查看标准宽松的公式。您只是返回一个新的小数值，以应用于您选择的元素的转换。

Answer 3

我相信每一个与拉斐尔一起度过的人都有机会发现它的道路动画严重不足。我在SO上发现了一些很好的解决方法（this是最全面的）。最重要的是，开箱即用的解决方案并不是很好。

我通常使用此实用程序功能（如果您发现此类包装更方便，则可轻松转换为Raphael插件）：

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

你可以用它来逐渐“吸引”一条几乎无限复杂的线。 Firefox仍然不够快，无法实时通过复杂的路径，但Chrome很棒，而且它仍然是VML友好的。

查看我的一些应用here和here。

Raphaël动画使用帧定时器

3 个答案: