0

私はラファエルが初めてで、アニメーションを作成しています。上または下の三角形に変形できるダイヤモンド。アニメーションには、クリック イベントを使用して循環できる 5 つのポイントがあります。私が望むのは、マウスを使用して、1 回のドラッグでアニメーションを任意のポイントから別のポイントに移動できるようにすることです。これを実装する方法を知っている人はいますか?

これは私のhtmlです：

<body>
  <div id='paper1'></div>
  <div class='animate'>
    <p>Animate!</p>
   </div>
</body>

そして私のjs：

$(document).ready(function(){
  var x = 0;
  var paper = Raphael('paper1', 500, 500); 
  var p1 = paper.path("M200,200 L 250,230 L 300,200 L250,170 Z")
  p1.attr({"stroke-width": 4, fill: "red"});

  $('.animate').click(function(){
     morph(p1,x);
     x ++;
     if (x === 8) x = 0;
  });
});

var morph = function(shape, count){
  console.log(count);
  if (count === 0) path =      {path:"M200,200 L250,200 L300,200 L250,90 Z"};
  else if (count === 1) path = {path:"M200,200 L250,200 L300,200 L250,10 Z"};
  else if (count === 2) path = {path:"M200,200 L250,200 L300,200 L250,90 Z"};
  else if (count === 3) path = {path:"M200,200 L250,230 L300,200 L250,170 Z"};
  else if (count === 4) path = {path:"M200,200 L250,310 L300,200 L250,200 Z"};
  else if (count === 5) path = {path:"M200,200 L250,390 L300,200 L250,200 Z"};
  else if (count === 6) path = {path:"M200,200 L250,310 L300,200 L250,200 Z"};
  else if (count === 7) path = {path:"M200,200 L 250,230 L 300,200 L250,170 Z"};


  shape.animate(path,300);
}

どんな助けでも大歓迎です。

ハ

4

1 に答える 1

0

いくつか遊んだ後、これを解決しました。誰かが興味を持っている場合、これが私の解決策です。 https://github.com/cmcguire79/raphael-widget

于 2013-03-06T17:43:35.520 に答える