1

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

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

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

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

谢谢 ：）

4

3 回答 3

3

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/以获取工作示例。

于 2012-12-22T18:31:04.330 回答
0

不完全确定您要问什么，但您可能只想定义自己的缓动公式。

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

如果烘焙的缓动方法都不能满足您的需求，那么制作自己的方法很容易。您可以在源代码中查看Raphael 中标准缓动的公式。您只是返回一个新的小数值以应用于您选择的元素的转换。

于 2012-12-22T18:09:42.510 回答
0

我相信每个与 Raphael 共度时光的人都有机会发现它的路径动画严重不足。我在 SO 上看到了一些很好的解决方法（这是最全面的）。最重要的是，没有开箱即用的好解决方案。

我通常使用这个实用功能（很容易转换为 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 友好。

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

于 2012-12-27T22:42:09.823 回答