ios - 画像を逆L字にアニメートする方法

Question

1 つの画像と 20 ～ 30 の長方形のセル ボタンを取得するような方法でタスクを実行しています。

これらの長方形のセルには、1,2,3,4,5,--------,30 と名前を付けました。長方形のセルを 6*7 のマトリックスに配置しました。ここで、長方形のセル ボタン 29 をクリックすると、画像はそのマトリックス内でクリックされたボタンに到達するための最短パスを見つける必要があります。

どうすればこれを実行できますか?

Answer 1

30 個のボタンのいずれかの位置にアニメーション化する 1 つの画像がありますか? さらに、斜めではなく、最初に水平に移動し、次に垂直に移動したいですか？CodaFi のコードは、私がやろうとしていたことに非常に近いものです。すべてのボタンにアタッチする IBAction メソッドを作成します。CodaFi のコードをベースにして、私が提案するアクション メソッドを次に示します。

-(IBAction)animateImageToButton: (id) sender
{
  button = (UIButton *) sender;

  //First animate the image to the x position of the button
  CGPoint fPoint = CGPointMake(button.center.x, image.center.y);
  CGPoint sPoint = button.center;
  //animate x position first.
  [UIView animateWithDuration: 1.0f animations: ^
    {
      [image setCenter:fPoint];
    }
    completion ^(BOOL finished)
    {
      //Once that animation is complete, create 
      //a second animation to move to the button's y position
      [UIView animateWithDuration: 1.0f animations: ^
      {
        [image setCenter:sPoint];
      }];
    }];
}

そのコードは、Image と呼ばれる単一の UIImageView を、タップされたボタンに移動します。

Answer 2

画像が目的地に到達するために対角線で移動するため、mundi がレイアウトしたタグのアプローチには同意しません。forループが適切だと思うので、私のアプローチは次のとおりです。

-(void)animateOnLinesWithClickedButton:(UIButton*)button {
    for (UIButton *image in self.view.subviews){
        CGPoint fPoint = CGPointMake(button.center.x, image.center.y);
        CGPoint sPoint = button.center;
        //animate x position first.
        [UIView animateWithDuration:1.0f animations:^{
            [image setCenter:fPoint];
        }
             completion^(BOOL finished){
                   [UIView animateWithDuration:1.0f animations:^{
                        [image setCenter:sPoint];
             }];
        }];
    }
}

これにより、ボタンが 1 つずつ正しい x 位置、次に y 位置にアニメーション化されます。この方法の遅延バリエーションを使用して、より現実的な効果を作成します。

Answer 3

ボタンには名前を付けませんが、tags を付けます。次のスキームを使用します。

button.tag = xCoordinate *100 + yCoordinate; 

たとえば、一番上の行の左から 3 番目のボタンの場合、タグは になります301。次のように座標を取得します。

xCoordinate = button.tag / 100; 
yCoordinate = button.tag % 100; 

centerあとは、画像の の x 座標と y 座標を変更して、画像をボタンの 、またはその近くの他のポイントにアニメーション化するだけですframe。