0

いくつかの要素のループ/繰り返しの背景を作成するための最も簡単で簡単な方法を探しています。

たとえば、円がある場合:

var filler = {
            'fill': 'white',
            'stroke': 'white',
            'stroke-width': '0'
}
var fillerHover = {
            'fill': '#b6def1',
            'stroke': '#b6def1',
            'stroke-width': '0',
            'cursor': 'pointer'
}

circle.hover(function() {
            circle.animate(fillerHover, 500);
        },

        function() {
            circle.animate(filler, 500);
        }
);

上記のコードはうまく機能していますが、トランジションを 1 回だけアニメーション化するため、円の上にカーソルを置いている限り、繰り返しループを作成したいと考えています。

そして、フィラーからフィラーホバーまでの円にカーソルがあるときに、カーソルを持って出るまで背景をループしたいと思います。

このようなループを最も簡単な方法で作成する方法は?

4

1 に答える 1

2

再度開始するアニメーションにコールバックを追加できます: http://raphaeljs.com/reference.html#Element.animate

でやらないでくださいsetInterval。フレームレートが上がります。
も使用しないでくださいrequestAnimationFrame。いつアニメーションがトリガーされるかわかりません。これを行う唯一の「安全な」方法は、Raphael にアニメーションが終了したときに (callbackオプションを介して) 次のアニメーションを開始するよう通知させることです。

何かのようなもの：

fillerHover.callback = mouseOver;
function mouseOver() {
  circle.animate(fillerHover, 500);
}

circle.hover(
  mouseOver,
  function() {
    circle.animate(filler, 500);
  }
);

それをあなたの現在のコードと混ぜてください =) あなたは私が何を意味するか知っています。

編集:これは次のようになります: http://jsfiddle.net/rudiedirkx/j9XyX/6/show/

于 2012-07-24T18:40:55.273 に答える