使用GSAP动画SVG patternTransform

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为'texture'的 patternTransform 属性设置动画，例如 scale（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 +')') 
    } 
});