1

RaphaelJSで行う変換を切り替える方法はありますか？現在のところ、以下のコードはクリックすると円を大きくするように機能します。必要なのは、もう一度クリックできるように変換を切り替えることです。すると、円が縮小して元の位置に戻ります。

window.onload = function() {
    centerX = 300;
    centerY = 300;
    var paper = new Raphael(document.getElementById('canvas_container'), 900, 900);

    //setup main circle
    var mainCircle = paper.circle(centerX,centerY,90);
    mainCircle.attr(
        {
            gradient: '90-#526c7a-#64a0c1',
            stroke: '#3b4449',
            'stroke-width': 10,
            'stroke-linejoin': 'round',
            rotation: -90  
        }  
    );


    //when clicking main circle
    mainCircle.click( function(e) {

        //move and grow the main circle
        mainCircle.animate({cx:00, cy:00, r:100}, 1000, "easeout");
        mainCircle.animate({
                "transform": "s " + (s = 3)}, 1000, "easeout"
    });

});
4

1 に答える 1

3

アニメーション属性（またはそれに関する任意のオブジェクト）を切り替えるために適用できる簡単なトリックがあります。それらを配列に入れ、数値スイッチをインデックスとして参照して交互に呼び出します。

var animAttrArr = [{
    "transform": "s 3"
}, {
    "transform": "s 1"
}],
    now = 1;

mainCircle.click(function (e) {
    this.animate(animAttrArr[+(now = !now)], 1000, "easeout");
});

JavaScriptのソフトタイプを使用しているだけです。数値はブール値に評価され、フラグとして機能します。

jsFiddleでライブデモをご覧ください。

  • stop()補足として、アニメーションの重複を防ぐために、アニメーションをトリガーする前にに呼び出しを追加することをお勧めします。例：

    this.stop().animate(animAttrArr[+(now = !now)], 1000, "easeout");

  • 別の注意点としてn > 2、カウンターのモジュロと配列の長さを抽出し、それをインクリメントすることで、変換の切り替えをサポートするようにコードを更新できます（ありがとう、@ gion_13）：

    this.stop().animate(animAttrArr[now++ % animAttrArr.length], 1000, "easeout");

    モジュロ演算は増分よりも優先されるため、ヒットすることを心配する必要はありません+Infinity（本当に心配になった場合に備えて:)）。

于 2013-02-07T23:07:20.353 に答える