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

0

何を求めているのか完全にはわかりませんが、独自のイージング式を定義したいだけかもしれません。

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

組み込みのイージング メソッドでニーズが満たされない場合は、独自のイージング メソッドを簡単に作成できます。Raphael の標準的なイージングの式は、こちらのソースで確認できます。選択した要素の変換に適用する新しい小数値を返すだけです。

于 2012-12-22T18:09:42.510 に答える
0

ラファエルと一緒に過ごしたことのある人なら誰でも、そのパス アニメーションがひどく不十分であることに気付く機会があると思います。ここ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 に答える