RaphaelJS Toggle Transformation

Question

有沒有辦法切換你在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"
    });

});

Answer 1

有一個簡單的技巧可以應用於切換動畫屬性（或任何對象）; 將它們放在一個數組中並通過引用數字開關作為索引交替調用它們：

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 （如果你真的擔心:)）。