2

Raphael を使用して、いくつかの線 (エッジ) を接続していくつかの円 (ノード) を移動する必要があります。円の (cx,cy) プロパティを変更すると、その円に接続されている線を (更新機能を使用して) 更新する必要があります。

アニメーションがなくても大丈夫

circle.attr({
  cx : newCx,
  cy : newCy
})
refreshEdges()

さて、アニメーションを使いたいなら…

circle.animate({
  cx : newCx,
  cy : newCy
},1000)

...円が動き始め、1000ms で最終位置に到達します。ただし、アニメーション中は、更新関数が呼び出されないため、その円に接続された線 (エッジ) は移動しません。

質問は次のとおりです。ラファエルがアニメーションの各ステップで呼び出す一種の「ステップ」コールバックを .animate() に指定する方法はありますか?

jQuery では、ステップ コールバックを .animate() のパラメーターとして指定できることを知っています... Raphael でもそれを行う方法があることを願っています :)

ありがとうございました！！

4

3 に答える 3

0

私はついにこの解決策を思いつきました...偽のcssプロパティを持つ偽のDIV要素でjQuery.animate（）を使用しています！

$("<div></div>")
.css({      // set initial animation values using "animX", "animY" fake css props
    'animX': circle.attr("cx"),
    'animY': circle.attr("cy")
})
.animate({  // set final animation values using "animX", "animY" fake css props
    'animX': newCx,
    'animY': newCy
}, {
    duration : 1000,
    step : function(now,fx){
        if (fx.prop == 'animX')
            circle.attr("cx", now )
        if (fx.prop == 'animY')
            circle.attr("cy", now )
        circle.refreshEdges()
    }
})

特にstep関数の詳細については、http：//api.jquery.com/animate/を参照してください。

さよなら！！

于 2012-05-01T12:15:36.303 に答える
0

HTML5 と Raphael は初めてですが、試行錯誤によってコールバックを機能させることができました。

var rect = r.rect(300, 385, 30, 100, 2).attr({
    fill: '#000',
    transform: t,
    "fill-opacity": .2
}).toFront().click(function () {
    s.animate({ transform: t, stroke: c }, 2000, "bounce", function () {
        //console.log('muhammad s.a.w');
    });
});
于 2013-04-27T15:58:21.667 に答える
0

円に接続された線でanimateWithを使用してみましたか? これを使用して問題を解決できる場合があります。あなたの refreshEdges() のコードが何であるかはわかりませんが、これを使用できない可能性があります。

于 2012-04-17T17:52:54.050 に答える