Raphael JS - 在鼠標懸停期間開始/繼續動畫。在鼠標懸停時暫停動畫

使用Raphael JS，有沒有辦法在鼠標懸停期間使圓形向右（或任何方向）移動，然後在光標不再位於圓上時暫停/停止移動。Raphael JS - 在鼠標懸停期間開始/繼續動畫。在鼠標懸停時暫停動畫

我試過幾種不同的方法，但他們有錯誤。其中一個主要問題是：如果鼠標光標在進入圓圈後沒有移動，一旦圓圈移動到鼠標光標不再位於圓圈頂部的位置，「鼠標移出」將不會被觸發。

你會明白我的意思，這些不同的嘗試：

1）製作具有暫停/恢復：

jsfiddle.net/fKKNt/

但動畫是生澀不可靠的。如果將鼠標懸停在對象上，則當對象移動到鼠標光標所在的位置以外時，它不會觸發「鼠標移出」偵聽器。

2）重新定位與鼠標懸停& .attr（「CX」）：

jsfiddle.net/c4BFt/

但我們希望動畫繼續當光標在圈內太。

3）使用的setInterval（所建議在： An "if mouseover" or a "do while mouseover" in JavaScript/jQuery）：

jsfiddle.net/9bBcm/

但「鼠標移出」不叫作爲圓移動的外側，其中光標位於。即圓圈移動到應該調用「mouseout」的位置，但它不被調用。同樣的事情發生以「懸停」：

jsfiddle.net/STruB/

來源

2011-12-19 aidanj

我敢肯定有一個更優雅的方式來做到這一點，但是從我的頭頂，你可以嘗試這樣：http://jsfiddle.net/D6Ps4/2/

如果由於某種原因消失，我已經包括下面的代碼。該解決方案只是啓動動畫，然後以某個設定時間間隔檢查鼠標光標（注意e.offsetX/e.offsetY）是否在Raphael對象（Element.getBBox()）的邊界框內。如果是，則什麼都不做，並使用setTimeout在一段時間內再次檢查，如果不是，則暫停動畫。

var paper = Raphael("holder"); 
    var animObject = Raphael.animation({cx: 400}, 5000); 
    circle = paper.circle(90, 90, 45).attr({fill: "#0E4"}); 
    var timer; 

    circle.mouseover(function(e) { 
     var anim = function(shouldAnim) { 
      if (shouldAnim) { 
       circle.animate(animObject); 
      } 
      if (!mouseInsideCircle(e, circle)) { 
       circle.pause(); 
       return;    
      } else { 
       timer = setTimeout(function() {anim(false)}, 20); 
      } 
     } 
     anim(true); 
    }); 

    circle.mouseout(function() { 
     this.pause(); 
     clearTimeout(timer); 
    }); 

    var mouseInsideCircle = function(e, c) { 
     var bb = c.getBBox(); 
     if (e.offsetX > bb.x && e.offsetY > bb.y) { 
      return true; 
     } 
     return false; 
    }

我敢肯定，該解決方案是有缺陷的（它檢查boundBox，而不是圈本身;它還假定圓向右移動），也許並不理想，但它似乎相當順利工作，並希望得到你在正確的道路上。

來源

2011-12-20 08:34:08 oli

Raphael JS - 在鼠標懸停期間開始/繼續動畫。在鼠標懸停時暫停動畫

回答

相關問題