ios - 如何以反向 L 形状为图像设置动画

Question

我正在执行一项任务，即拍摄一张图像和二十到三十个矩形单元格按钮。

对于那些矩形单元格，我将它们命名为 1,2,3,4,5,--------,30。我将矩形单元格排列在 6*7 矩阵中。现在，如果我单击矩形单元格按钮 29，则图像必须在该矩阵中找到最短路径才能到达单击的按钮。

我该怎么做？

Answer 1

您有一个图像想要动画到 30 个按钮之一的位置？此外，您希望它不是沿对角线移动，而是首先水平移动，然后垂直移动？CodaFi 的代码非常接近我会做的。我会编写一个 IBAction 方法，将其附加到所有按钮上。Startig 以 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

我不会为按钮命名，而是给它们命名tag。我会使用以下方案：

button.tag = xCoordinate *100 + yCoordinate; 

因此，例如，对于顶行左起第三个按钮，标签将是301. 像这样检索坐标：

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

现在您所要做的就是center通过更改图像的 x 和 y 坐标将图像动画到按钮或附近的其他点frame。

Answer 3

我不同意 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];
             }];
        }];
    }
}

这会将您的按钮一一设置为正确的 x，然后是 y 位置。使用此方法的延迟变化来创建更逼真的效果。