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 Web サイト 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 に答える