在重複循環結束時修改SVG animateTransform

隨着時間的推移，我試圖讓對象旋轉的速度越來越快，而且每次動畫重複時都會遇到事件觸發的麻煩。 SVG/SMIL的似乎是我需要的，但在下面的代碼中，onSpinEnd（）似乎根本不會被調用。我究竟做錯了什麼？在重複循環結束時修改SVG animateTransform

<path id='coloredPart' d='…'> 
     <animateTransform 
      id='spin' 
      attributeName='transform' 
      begin='0s' 
      dur='5s' 
      type='rotate' 
      from='0 0 0' 
      to='-360 0 0' 
      repeatCount='indefinite' 
     /> 
    </path> 

    <script> <![CDATA[ 
     var spin = document.getElementById('spin'); 
     var onSpinEnd = function() { 
      var intPart = 0; 
      intPart = parseInt(spin.getAttribute('dur')[0].slice(0, -1)); 
      console.log(intPart); 
      if (intPart > 1) --intPart; 
      spin.setAttribute('dur', intPart.toString() + 's'); 
     }; 
     spin.addEventListener('repeatEvent', onSpinEnd, false) 
     ]]> 
    </script>

事實證明，[0].slice(0, -1))將不會從「16S」給我「16」; .slice(0, -1))會。該行應爲：

intPart = parseInt(spin.getAttribute('dur').slice(0, -1));

來源

2011-12-28 adiabatic

顯然repeatEvent沒有解僱，但我找不到原因。無論如何，我必須指出你的'切片'是錯誤的，你不能使用負向索引。 – bennedich

其實，[你可以使用否定索引]（https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/slice）。 – adiabatic

我不確定切片的用途。這似乎在Firefox上工作。

var onSpinEnd = function() { 
    var spin = document.getElementById('spin'); 
    var intPart = 0; 
    intPart = parseInt(spin.getAttribute('dur')[0]); 
    console.log(intPart); 
    if (intPart > 1) --intPart; 
    spin.setAttribute('dur', intPart.toString() + 's'); 
};

此外，據我所知只有Opera和Firefox目前發射SMIL事件。

來源

2011-12-28 09:24:31

只有Firefox和Opera，呃？謝謝！ – adiabatic

在重複循環結束時修改SVG animateTransform

回答

相關問題