將動畫添加到RaphaelJS切換功能

我跑過了這段代碼，並將它用作開發我自己的特定切換功能的參考。將動畫添加到RaphaelJS切換功能

Raphael.js - if/else statement not toggling on click

我想動畫應用到筆畫寬度每次說的時候它是在點擊增加。我似乎無法弄清楚如何在切換功能中添加此動畫。

我想這將圍繞變量適用StrON和StrOFF所以我已經試過的東西，如：

var strOff = function() { 
      this.animate({ 'stroke-width': '1' }, 100); 

     }; 

    var strOn = function() { 
      this.animate({ 'stroke-width': '5' }, 100); 

     };

，甚至只是：

var strOff = 
     this.animate({ 'stroke-width': '1' }, 100); 



var strOn = 
     this.animate({ 'stroke-width': '5' }, 100);

對不起懶惰的語法如果我錯過了任何關於我嘗試過的兩個例子。謝謝你的幫助。

來源

2012-12-12 user1896863

這兩者都不會工作，因爲strOn和strOff不是正確的數據類型 - 它們必須是包含給定矩形的選定狀態和取消選定狀態的屬性的對象。這代表對動畫所做的基本誤解：它本質上是attr的異步版本。

你可以通過簡單的斯特龍和strOff恢復到原來的狀態，然後調用該單擊處理程序對給定的矩形解決您的問題：

box1.animate(strOn, 100); 
box2.animate(strOff, 100); 
box3.animate(strOff, 100);

這仍然給你留下一個複雜的問題。如果你想添加第四個或第五個矩形，你將很快陷入條件邏輯。在我看來，這種狀態信息應該幾乎不會像這樣執行。相反，我建議您這樣做：

使用單個通用點擊處理程序。

var genericClickHandler = function() 
{ 
    // First step: find and deselect the currently "active" rectangle 
    paper.forEach(function(el) 
     { 
      if (el.data('box-sel') == 1) 
      { 
       el.animate(strOff, 100).data('box-sel', 0); 
       return false; // stops iteration 
      } 
     }); 
    this.animate(strOn, 100).data('box-sel', 1); 
}

這將通過在紙張的所有元素迭代 - 如果它們中的一個被標記爲「活動」，它將被動畫回其非活動狀態。

使用data跟蹤選定的矩形：

paper.rect(x1, y1, w1, h1).attr({}).data('box-sel', 0).click(genericClickHandler); // note that we're setting data to indicate that this rectangle isn't "active" 
paper.rect(x2, y2, w2, h2).attr({}).data('box-sel', 0).click(genericClickHandler); 
// ... as many rectangles as you like 
paper.rect(xN, yN, wN, hN).attr({}).data('box-sel', 0).click(genericClickHandler);

使用這種方法，沒有必要跟蹤獨立的矩形 - 一個給定的矩形只是否被選中或不。

這是example supporting many rectangles。

來源

2012-12-12 18:43:10

非常感謝Kevin，這正是我需要的無懈可擊的解釋。 – user1896863

很高興幫助，儘管我的格式很糟糕！ *拍額頭* –

將動畫添加到RaphaelJS切換功能

回答

相關問題