Question

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

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

我正在尝试这样做：

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

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

Answer 1

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

例如： TweenLite.to（＆＃34; #rect＆＃34;，1，{attr：{x：100，y：50，width：100，height：100}，ease：Linear.easeNone}）;

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

Answer 2

我认为它必须是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 fiddle here http://jsfiddle.net/g9g6M/10/

希望这有帮助。

使用greensock tweenlite（js版本）补间svg属性

2 个答案: