Animate 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 +')') 
    } 
});