2

左右に動くこの単純なアニメーションがあります。アニメーションが停止してデフォルトに戻るようにリセットボタンを作成しようとしていますが、正しく理解できないようです。

私が使用しているライブラリはRaphaelですが、単純なjavascriptを使用して、関数内の値をリセットできるとほぼ確信しています。

ボディオンロード初期化機能

function init() {
  paper = Raphael("loadSVG");

  var bg = paper.rect( 0, 0, "240px", "90px", 0 );
  bg.attr( {fill: "#f3f3ff"} );
  rect1 = paper.rect(150, 20, 50, 50);
  rect1.attr( {fill: "#ffaaaa", "stroke-width": 3} );
}

アニメーション機能

function moveRect1() {      
  if( xEnd == 150 )
    xEnd = 50;
  else
    xEnd = 150;

  rect1.animate( {x: xEnd}, 1000, "Sine", function (){ 
    moveRect1(); 
  }); 
}

と機能しない停止ボタン:)

function stopsvgRect1() {
  rect1.stop();
}
4

1 に答える 1

2

作成した関数に停止ボタンをバインドする必要があります。

たとえば、次のようになります。

document.querySelector('#stop').onclick = function() {
    stopsvgRect1();
};

このフィドルを開いて、実際の動作を確認してください。

編集：

Raphael.transform()位置もリセットする必要があるため、このアクションを選択できます。

更新されたフィドルを開いて、どのように機能するかを確認します。

于 2012-07-05T08:53:35.283 に答える