同じ円が大きくなってから小さくなるという 2 つのアニメーションがあります。これをタイマーが切れるまで繰り返します。これは機能します。それらは再帰的に定義されており、私のリーグから少し外れています。問題は、アニメーション中に速度を変更することです。タイマーを含む無関係なコードを削除し、インターフェイスを 3 つのボタンに簡素化しました。
1) 開始/停止
2) スピードアップ
3) 遅くなる
内部定義関数の変更には機能しますが、外部には機能しません。なぜなのかわかりません。どんな援助でも大歓迎です。それを解決する私のコメントに注意してください。コンピューター サイエンスの原理に対する私の理解は驚くべきものではありません。Chrome のインスペクターを使用してスタックを表示しようとしましたが、何も表示されず、とにかく自分が何をしているのかわかりませんでした。
var IN_DURATION = 3000;
var OUT_DURATION = 5000;
var anim_inhale = Raphael.animation({
transform: "S " + 2.2 + " " + 2.2 + " T +"+(-320*2.2)+" "+(-240*2.2),
fill: "#0f0"
}, IN_DURATION , "linear", function () {
breath_circle.animate(Raphael.animation({
transform: "",
fill: "#00f"
}, OUT_DURATION , "linear", function () {
breath_circle.animate(anim_inhale);
}));
});
breath_circle.animate(anim_inhale);
動作中の JSFiddle http://jsfiddle.net/nastajus/RgWbL/2/を提供しました