7

だから私はgRaphaelを使っていくつかのチャートを作成しています。これは、いくつかのドットを含むクールな棒グラフの線を作成しています。これらのドットには、属性として x=10 y=20 の ... ノードがあります。例

rect x="135.8" y="115.8" width="8.399999999999999" height="8.399999999999999" r="0" rx="0" ry="0" fill="#ff0000" stroke="なし"

可能であれば、jquery を使用してこの男をアニメーション化したいと考えています。事は私がするかどうかです

$("rect").click(関数({
 $(this).animate({
   'x':30
 });
});

x座標をアニメーション化するために、明らかな理由で機能しませんか?? へへ。また、属性 x を変数に設定して、それをアニメーション化しようとしましたが、何もしませんでした。gRaphael でアニメーションと SVG を手伝ってくれる人はいますか?

これは例えば動作します

$("rect").live('click',function(){ $(this).attr('x',100);});
ノードを移動しますが、もちろんアニメーション化はしません

ありがとう！

4

6 に答える 6

11

私はsvgsを使用するプロジェクトに取り組んでいます。上記を機能させている間、アニメーションの前に値があったとしても、アニメーションの値は0からどこにでもありました。そこで、代わりにこれを使用しました (cy の初期値は 150 です):

$('#navlet .li1').mouseenter(function(){
    $({cy:$('#nav_dot').attr('cy')})
    .animate(
    {cy: 60},
    {duration:200,step:function(now){$('#nav_dot').attr('cy', now);}});
});
于 2013-07-24T12:26:44.353 に答える
10

そうすることで、プロパティを確実にアニメーション化できます

$("rect")
    .animate(
        { x: 100 },
        {
            duration: 1000,
            step: function(now) { $(this).attr("x", now); }
        });

そのプロパティを CSS に保存する必要はありません。

于 2013-04-30T17:38:18.977 に答える
3

実際、特定の属性をアニメーション化する方法があります。

$("rect").each(function(){
   $(this).css("MyX",$(this).attr("x"))
   .animate({MyX:500},{step:function(v1){$(this).attr("x",v1)}})
})
于 2013-01-29T10:14:02.073 に答える
2

ここで他の回答のようにアニメーションが開始すると属性が0にリセットされるという問題に遭遇せずにjQuery呼び出しを使用する方法を見つけました

id を持つ img タグ要素のwidthand属性をアニメーション化したいとしましょう。現在の値から 300 にアニメートするには、次のようにします。heightimage

var animationDiv= $("<div></div>"); //we don't add this div to the DOM
var image= $("img#image");
//could use any property besides "top" and "left", but the value must be valid, that means concatenating a "px" to numerical attributes if they don't have it already (and removing them in the step callback if they do)
animationDiv.css("left", image.attr("width")); 
animationDiv.css("top", image.attr("height")); 
animationDiv.animate(
    {
        left: 300,
        top: 300
    },
    {
        duration: 2500,
        step: function(value, properties) {
            if (properties.prop == "left")
                 image.attr("width", value + "px")
            else
                 image.attr("height", value + "px")
        }
    }
)

このアプローチでは、DOM 内にない div を使用してその値をアニメーション化し、次に div CSS 値を使用して要素をアニメーション化します。あまりきれいではありませんが、アニメーションを停止する必要がある場合は、animationDiv を呼び出すことができます.stop()。

jsfiddle

于 2014-12-31T10:31:24.863 に答える
0

@rslm のように、SVG のアニメーション化に取り組んでいて、viewBox プロパティを変更する必要がありました。これが私の解決策です：

(注、私は ES6 を使用したので、コードを ES5 互換にするために書き直すか、babel を使用する必要があるかもしれません)

let scrollTimeOut;

/**
 * Animate the viewBox property for the logo
 * @param {object} start
 * @param {object} finish
 */
let animateLogo = (start, finish) => {
    let svg = $('.logo-container svg');

    $(start).finish().animate(finish, {duration: 400, step: (newVal, item) => {
        let split = svg.attr('viewBox').split(' ');
        let width = split[2];
        let height = split[3];


        if (item.prop === 'vbw') {
            width = newVal;
        } else {
            height = newVal;
        }


        svg.attr({viewBox: `${split[0]} ${split[1]} ${width} ${height}`})
    }});
};

/**
 * Set the height of the header
 */
let setHeaderHeight = () => {
    let split = $('.logo-container svg').attr('viewBox').split(' ');
    let finish;
    let start = {vbw: +split[2], vbh: +split[3]};

    if (window.scrollY < 50) {
        finish = {vbw: 1000, vbh: 1000};
    } else {
        finish = {vbw: 1600, vbh: 300};
    }

    if (finish.vbw !== start.vbw && finish.vbh !== start.vbh) {
        // If there is something to animate
        animateLogo(start, finish)
    }
};

$(window).off('scroll.staggered').on('scroll.staggered', () => {
    // Only do something every 50ms
    window.clearTimeout(scrollTimeOut);

    scrollTimeOut = window.setTimeout(() => {
        setHeaderHeight();
    }, 50);
});

完全を期すためにセクションを追加しましたが、必要に応じ$(window).off('scroll.staggered')....て呼び出すように変更する必要がありsetHeaderHeight()ます。

于 2020-05-25T16:30:00.747 に答える
-1

数値を持つ有効な CSS プロパティのみをアニメーション化できます。色は、いくつかのプラグインを介してアニメーション化できます。「x」は有効な CSS プロパティではないため、jQuery の組み込み .anmiate() 関数を使用してアニメーション化することはできません。

xタイムアウトの各パススルーの値をインクリメントするには、独自のアニメーション関数をほとんど作成する必要があると思います。

于 2011-07-12T21:07:29.060 に答える