ios - 如何动画和旋转按钮

Question

我有一个 UIButton和两个 UILabels周围。现在，当您点击按钮时，两个标签会动画并相互改变它们的位置。除了发生这种情况外，我还想对按钮进行动画处理并将其旋转 180 度，然后随着标签位置的改变返回到原始位置。我怎样才能做到这一点？

这里是按钮单击处理程序的代码 -

NSIndexPath *homeToWorkCellIndexPath = [NSIndexPath indexPathForRow:0 inSection:0];
    UITableViewCell *homeToWorkCell = [self.tableView cellForRowAtIndexPath:homeToWorkCellIndexPath];
    UILabel *homeLabel = (UILabel *)[homeToWorkCell viewWithTag:1];
    UIButton *switchButton = (UIButton *)[homeToWorkCell viewWithTag:2];
    UILabel *workLabel = (UILabel *)[homeToWorkCell viewWithTag:3];

    CGRect homeLabelRectFrame = homeLabel.frame;
    CGRect workLabelRectFrame = workLabel.frame;

    [UIView animateWithDuration:0.3 animations:^{
        homeLabel.frame = workLabelRectFrame;
        workLabel.frame = homeLabelRectFrame;
    } completion:^(BOOL finished) {
        // will switch the pickup points here
        NSString *currentFromPickupPointId = _fromPickupPointId;
        NSString *currentToPickupPointId = _toPickupPointId;

        _fromPickupPointId = currentToPickupPointId;
        _toPickupPointId = currentFromPickupPointId;
    }];

理想情况下，我想用这种方法制作这个动画，但我对动画没有太多经验，因为我是 iOS 开发新手。

编辑:
如答案中所述，我尝试将按钮点击处理程序更改为-

NSIndexPath *homeToWorkCellIndexPath = [NSIndexPath indexPathForRow:0 inSection:0];
    UITableViewCell *homeToWorkCell = [self.tableView cellForRowAtIndexPath:homeToWorkCellIndexPath];
    UILabel *homeLabel = (UILabel *)[homeToWorkCell viewWithTag:1];
    UIButton *switchButton = (UIButton *)[homeToWorkCell viewWithTag:2];
    UILabel *workLabel = (UILabel *)[homeToWorkCell viewWithTag:3];

    CGRect homeLabelRectFrame = homeLabel.frame;
    CGRect workLabelRectFrame = workLabel.frame;

    // animation for the labels
    [UIView animateWithDuration:0.3 animations:^{
        homeLabel.frame = workLabelRectFrame;
        workLabel.frame = homeLabelRectFrame;
    } completion:^(BOOL finished) {
        // will switch the pickup points here
        NSString *currentFromPickupPointId = _fromPickupPointId;
        NSString *currentToPickupPointId = _toPickupPointId;

        _fromPickupPointId = currentToPickupPointId;
        _toPickupPointId = currentFromPickupPointId;
    }];

    // animation block for the button
    [UIView animateWithDuration:0.3/2 delay:0 options:UIViewAnimationOptionAutoreverse animations:^{
        CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI);
        switchButton.transform = transform;
    }completion:^(BOOL finished) {
        CGAffineTransform transform = CGAffineTransformMakeRotation(0);
        switchButton.transform = transform;
    }];

这确实为按钮旋转设置了动画。但是标签交换的动画不再发生。不知道这里发生了什么。

如果评论中有不清楚的地方，请告诉我。

Answer 1

将此动画 block 用于按钮以及其余代码:

[UIView animateWithDuration:0.3/2 //half the label animation duration
                      delay:0
                    options:UIViewAnimationOptionAutoreverse
                 animations:^{
                     CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI);
                     switchButton.transform = transform;
                 }
                 completion:^(BOOL finished) {
                     CGAffineTransform transform = CGAffineTransformIdentity;
                     switchButton.transform = transform;
                 }];

编辑:

如果您按帧交换标签，则删除 AutoLayout在您的自定义UITableViewCell (Xib > 文件检查器 >(取消选中)使用自动布局)

但是...

如果想继续使用AutoLayout在 UITableViewCell ，你应该，然后你需要改变标签约束而不是框架。

要通过约束更改来做到这一点:

对 view 施加约束小号

使用 NSLayoutConstraint 为必要的约束建立导出连接对象

修改约束的constant参数

调用 -layoutIfNeeded在持有这些约束的观点上

示例(通过 XIB 自动布局):

在 .h 您的自定义 UITableViewCell类(我命名为 CustomCell )

@interface CustomCell : UITableViewCell

@property (nonatomic, strong) IBOutlet UIButton *btnTest;
@property (nonatomic, strong) IBOutlet UITextField *txtF_1;
@property (nonatomic, strong) IBOutlet UITextField *txtF_2;

//----txtF_1 constraints
//Leading Constraint
@property (nonatomic, strong) IBOutlet NSLayoutConstraint *constraint_1_left;
//Trailing Constraint
@property (nonatomic, strong) IBOutlet NSLayoutConstraint *constraint_1_right;

//----txtF_2 constraints
//Leading Constraint
@property (nonatomic, strong) IBOutlet NSLayoutConstraint *constraint_2_left;
//Trailing Constraint
@property (nonatomic, strong) IBOutlet NSLayoutConstraint *constraint_2_right;

@end

示例 XIB看起来像:



连接 NSLayoutConstraint导出:



txtF_1约束概述:



txtF_2约束概述:



您的 tableViewController方法

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    CustomCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    if (cell == nil) {
        cell = [[[NSBundle mainBundle] loadNibNamed:@"CustomCell"
                                              owner:nil
                                            options:nil]
                objectAtIndex:0];
    }

    [cell.txtF_1 setText:@"left"];
    [cell.txtF_2 setText:@"right"];

    [cell.btnTest addTarget:self
                     action:@selector(btnTestAct:event:)
           forControlEvents:UIControlEventTouchUpInside];

    return cell;
}

-(void)btnTestAct:(UIButton *)sender event:(UIEvent *)event
{
    NSSet *touches = [event allTouches];
    UITouch *touch = [touches anyObject];
    CGPoint point = [touch locationInView:self.tableView];
    NSIndexPath *indexPath = [self.tableView indexPathForRowAtPoint:point];

    CustomCell *cell = (CustomCell *)[self.tableView cellForRowAtIndexPath:indexPath];

    //backup constraints
    NSInteger i_left = cell.constraint_1_left.constant;
    NSInteger i_right = cell.constraint_1_right.constant;
    //swap constraints
    cell.constraint_1_left.constant = cell.constraint_2_left.constant;
    cell.constraint_1_right.constant = cell.constraint_2_right.constant;
    cell.constraint_2_left.constant = i_left;
    cell.constraint_2_right.constant = i_right;

    CGFloat f_animationTime = 0.3;

    //textField animation
    [UIView animateWithDuration:f_animationTime
                     animations:^{
                         //animate constraint changes
                         [self.view layoutIfNeeded];
                     }];

    //button animation
    [UIView animateWithDuration:f_animationTime/2
                          delay:0
                        options:UIViewAnimationOptionAutoreverse
                     animations:^{
                         CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI);
                         sender.transform = transform;
                     }
                     completion:^(BOOL finished) {
                         CGAffineTransform transform = CGAffineTransformIdentity;
                         sender.transform = transform;
                     }];
}