3

次のように、SVG「歯車/歯車」形状を無限にアニメーション化して、無限に回転させます。

gearAnim = Raphael.animation({ transform: rotation }, duration, 'linear');
which.animate(gearAnim.repeat("Infinity")); // rotate infinitely.

ギア パルス (スケール変換) を作成する場合は、次のようにします。

value.animate({
   2: { transform: "s1.2" },
   3: { transform: "s1"} 
}, 600, 'easeOut');

これは機能します。しかし問題は、歯車の回転でスケール変換が起こらないことです。アニメーションを停止し、回転 0 にリセットし、スケーリングしてから、前のアニメーションに戻ります。

無限に回転しながら形状を 1 回スケーリングできるようにする方法はありますか? 私がここに欠けているものはありますか？

どうもありがとう。

4

1 に答える 1

1

それが最善の方法かどうかはわかりませんが、1 つのオプションはコールバックを設定することです: http://jsfiddle.net/b9akz/106/

var paper = new Raphael('holder');
var box = paper.rect(100, 100, 30, 30).attr({ stroke: "darkgreen" });
var scale = 2;
var angle = 0;
var func = function(){
    scale = scale > 1.5 ? 1 : 2; 
    angle = angle + 120;
    box.animate(Raphael.animation({ transform: "s" + scale + " r" + angle }, 1000, 'linear', func), 1);
};
func();

ただし、最初にいくつかのアーティファクトがあります-最初の回転サイクルが終了した後にのみスケーリングを開始するようです.

于 2012-09-20T22:48:47.900 に答える