4

我想使用greensock的 js 动画平台来补间 svg 圆的半径，但它似乎不起作用，而且我在文档中没有看到任何关于补间属性的内容，只有 css 属性。这可能吗？我基本上有这个：

<circle r="17.451467196282987" data-rad="17.451467196282987"></circle>

我正在尝试这样做：

TweenLite.to($('circle'), .5, {r:25});

我试过用 jquery 做这个，它也没有工作，但我会接受任何一种方法。

4

2 回答 2

4

您现在可以直接为 attr 值设置动画

例如：TweenLite.to("#rect", 1, {attr:{x:100, y:50, width:100, height:100}, ease:Linear.easeNone});

查看 GSAP 网站 http://greensock.com/docs/#/HTML5/GSAP/Plugins/AttrPlugin/

于 2014-10-27T13:35:46.297 回答
3

我认为这一定是jQuery和TweenMax/Lite针对元素属性的方式。

通过创建一个具有属性的对象，我设法让它使用 TweenLite 工作。然后，您可以补间属性并将其应用回元素，如下所示。

$(document).ready(function(){

            var o = {r : $('circle').attr('r')};

            TweenLite.to(o, 2, {r:100, onUpdate:onUpdateHandler, onComplete:ocCompleteHandler});

            function onUpdateHandler(){
                $('circle').attr('r', o.r);
            }
            function ocCompleteHandler(){
                alert('end');
            }

    });

js小提琴在这里http://jsfiddle.net/g9g6M/10/

希望这可以帮助。

于 2013-01-24T17:07:56.490 回答