3

私はjavascriptとRaphaellibを使って一種のjavascriptマップを作成しています。クリックするとオブジェクトを拡大できますが、アニメーション化する必要があります（ゆっくりと飛び込むなど）。車輪の再発明をせずにそうする方法はありますか？

4

2 に答える 2

6

svgオブジェクトのビューボックスをアニメーション化できない理由はありません。Raphaelは、そのような機能をそのままでは提供していません。ただし、プラグインの作成はかなり簡単です。例えば：

Raphael.fn.animateViewBox = function animateViewBox( x, y, w, h, duration, easing_function, callback )
{
    var cx = this._viewBox ? this._viewBox[0] : 0,
        dx = x - cx,
        cy = this._viewBox ? this._viewBox[1] : 0,
        dy = y - cy,
        cw = this._viewBox ? this._viewBox[2] : this.width,
        dw = w - cw,
        ch = this._viewBox ? this._viewBox[3] : this.height,
        dh = h - ch,
        self = this;;
    easing_function = easing_function || "linear";

    var interval = 25;
    var steps = duration / interval;
    var current_step = 0;
    var easing_formula = Raphael.easing_formulas[easing_function];

    var intervalID = setInterval( function()
        {
            var ratio = current_step / steps;
            self.setViewBox( cx + dx * easing_formula( ratio ),
                             cy + dy * easing_formula( ratio ),
                             cw + dw * easing_formula( ratio ),
                             ch + dh * easing_formula( ratio ), false );
            if ( current_step++ >= steps )
            {
                clearInterval( intervalID );
                callback && callback();
            }
        }, interval );
}

このプラグインのインストール後にインスタンス化されたすべてのペーパーは、Raphaelの組み込みのanimateメソッドが機能するのとまったく同じ方法でanimateViewBoxを使用できます。例えば...

var paper = Raphael( 0, 0, 640, 480 );
paper.animateViewBox( 100, 100, 320, 240, 5000, '<>', function()
    {
        alert("View box updated!  What's next?" );
    } );

ここでデモンストレーションが行われます。

于 2012-11-14T01:38:37.040 に答える
0

Raphaelアニメーションは、要素の属性をアニメーション化することで機能します。element.animateを呼び出すときは、最終的なオブジェクトパラメータ、そこに到達するのにかかる時間、および線形にしたくない場合はイージング関数を指定します。

たとえば、円を拡大/縮小するには、次の例を検討してください。http: //jsfiddle.net/eUfCg/

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");


var zoomed = false;

circle.click(function () { 
    if (zoomed) {
        this.animate({ transform: "s1" }, 500);
        zoomed = false;
    } else {
        this.animate({ transform: "s4" }, 500);
        zoomed = true;
    }
});​

これは、円の変換プロパティをアニメーション化します。マップを拡大縮小するには、すべての要素をグループ内に配置し、最終的に完成させたい拡大縮小と変換を考慮して、グループの変換プロパティをアニメーション化する必要があります。

変換プロパティの詳細については、http：//raphaeljs.com/reference.html#Element.transformを参照してください。

于 2012-11-12T12:55:12.663 に答える