動畫SVG patternTransform與GSAP

Question

我有這個在我的SVG：

<rect fill="url(#texture)" width="100%" height="100%" /> 
<defs> 
    <pattern id="texture" patternUnits="userSpaceOnUse" patternTransform="scale(0.5)" width="300" height="300"> 
     <image id="texture-image" xlink:href="texture.png" x="0" y="0" width="300" height="300" /> 
    </pattern> 
</defs> 

，我想從規模使用該庫GSAP動畫「紋理」的patternTransform屬性，例如（0.5）至比例尺（0.8）。 但是，由於它不是一個正常的數字或顏色屬性，很容易由庫處理，所以我很難做到這一點。 我以不同的方式試圖與rAF，但它無法正常工作或實際：

var svgTexture = document.getElementById('texture'), 
    scaleValue, scaleLimit, increaseBy; 

function animate(value, limit, step) { 
    scaleValue = value; 
    scaleLimit = limit; 
    increaseBy = step; 
    animateSvgTexture(); 
} 

function animateSvgTexture() { 
    var val = scaleValue - increaseBy; 
    if (val < scaleLimit) { 
     return false; 
    } 
    svgTexture.setAttribute('patternTransform', 'scale('+ val +')'); 
    requestAnimationFrame(animateSvgTexture); 
} 

/** 
* Provides requestAnimationFrame in a cross browser way. 
* @author paulirish/http://paulirish.com/ 
*/ 
if (!window.requestAnimationFrame) { 
    window.requestAnimationFrame = (function() { 
     return window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame || 
      window.oRequestAnimationFrame || 
      window.msRequestAnimationFrame || 
      function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { 
       window.setTimeout(callback, 1000/60); 
     }; 
    })(); 
} 

，然後當我要開始動畫我稱之爲例如：

animate(0.3, 0.2, 0.01); 

反正我真的希望有人能闡明如何使用GSAP一些光達到這個結果，使用這樣的語法：

TweenLite.to("#texture", 1, { 
    patternTransform: 'scale(0.8)', 
    ease: Power2.easeInOut 
}); 

千恩萬謝

Answer 1

最後我發現了它。 如果有人需要它，下面是如何做到這一點：

var svgTexture = document.getElementById('texture'), 
    anim = { 'scale' : 0.5 }; // 0.5 is the initial default value 

TweenLite.to(anim, 2, { 
    scale: 0.3, 
    onUpdate: function() { 
     svgTexture.setAttribute('patternTransform', 'scale('+ anim.scale +')') 
    } 
});