javascript - 使用 GSAP 制作 SVG 图案变换动画

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) 到 scale (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 +')') 
    } 
});