4

画面の周りの円 (ノード) をアニメーション化するために、CSS トランジションを使用しています。

CSS:

.circle {-webkit-transition: all 0.8s ease-in-out; }

JS:

 $('.circle').css({ webkitTransform: "translate3d(20px, 20px, 0px)" })

翻訳プロパティを常に把握できるようにしたいので、ノードを結ぶ線を更新できます。

jQuery アニメーションを使用している場合は、「ステップ」関数を使用できます。CSSトランジションに似たようなものはありますか? 「webkitTransitionEnd」イベントを見たことがありますが、個々のアニメーション ステップには何もありません。

または、タイマーでそれを行う必要がありますか？

4

1 に答える 1

0

理論的には、タイマーを使用してアニメーション化された要素の計算値を取得できますが、実行速度が遅くなることがほぼ保証されています。計算された値に段階的にアクセスする必要性を感じたことはなく、2 つ以上のアニメーションを同時に開始しました。

線で囲まれた円などのより複雑なものをアニメーション化する場合は、raphaelなどのキャンバス ライブラリの使用を検討する必要があります。

このデモのように、あなたが達成しようとしているのと同じようなデモがすでにいくつかあります。

于 2012-11-12T14:50:21.697 に答える