UIBarButtonItem 刷新动画偏移

Posted 2023-02-23

【中文标题】UIBarButtonItem 刷新动画偏移

【英文标题】：UIBarButtonItem refresh animation is offset

【发布时间】：2015-11-11 17:34:35

【问题描述】：

这个相关的SO question 确实显示了与我自己类似的问题，但提供的答案并不能解决我的问题。

我有一个刷新按钮，当它被点击时我会动画。这是一个 UIBarButtonItem，在故事板中创建，我用来创建的图像是：

AFAIK - 图像是方形的，描绘的圆圈居中且真实。

当我点击图片时，我称之为动画代码：

#define DEGREES_TO_RADIANS(angle) ((angle) / 180.0 * M_PI)
- (void)animateRefreshButton;

    UIBarButtonItem *item = self.refreshButton;
    UIView *view = [item valueForKey:@"view"];

    [UIView animateWithDuration:0.5 delay:0.3 options:UIViewAnimationOptionCurveEaseInOut animations: ^
     
         view.transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(180));
      completion: ^(BOOL finished)
     
         view.transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(0));

     ];

但是动画“跳跃”并且它也会影响标题。见 gif：

我已经尝试了很多东西，但上面的视频是关于我能得到的最好的动画。我尝试过的事情包括：

将图像添加到按钮的自定义视图并为其设置动画。 调整图像插图（但在每个设备和旋转上都不同） 调整图像本身的大小以匹配大小 导航栏“变成”，大约 50x30 应用不同的动画块来尝试掩盖“跳跃”（可怕）

如果有人遇到类似问题并解决了，那么任何指针都会很棒

另外，如果我对我使用的技术有误导，请告诉我。

我确实检查了图像，它似乎很好，但那里的人可能更了解。

【问题讨论】：

其实我看不到你视频的问题：点击0.3秒后有初始延迟，图片1/2秒旋转180度，标题没有改变。那么，有什么问题呢？

点击后图片向上移动

【参考方案1】：

好的 - 秘密在于发现默认情况下 UIBarButtonItem 使用的图像被重新调整为 50x30

UIBarButtonItem *item = self.refreshButton;
UIView *view = [item valueForKey:@"view"];

此时我放了一个断点并检查了视图的框架，它的大小是 50 x 30 ！

此外，我添加了一个旋转图像的自定义视图，尺寸为 50 x 30 到按钮并旋转它。

#pragma mark - UIRefreshControl method(s)

- (void)configureSpinningView;

    // 50x30 is the size that the nav bar sets for the buttons image...

    self.refreshControlSpinningImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 50, 30)];
    self.refreshControlSpinningImageView.image = [UIImage imageNamed:@"btnSync"];
    self.refreshControlSpinningImageView.autoresizingMask = UIViewAutoresizingNone;
    self.refreshControlSpinningImageView.contentMode = UIViewContentModeCenter;

    UITapGestureRecognizer *tapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(refreshTapped:)];

    [self.refreshControlSpinningImageView addGestureRecognizer:tapRecognizer];


#pragma mark - aimation(s)

#define DEGREES_TO_RADIANS(angle) ((angle) / 180.0 * M_PI)
- (void)animateRefreshButton;

    [self.refreshButton setCustomView:self.refreshControlSpinningImageView];

    [UIView animateWithDuration:0.5 delay:0.3 
options:UIViewAnimationOptionCurveEaseInOut animations: ^
    
        self.refreshControlSpinningImageView.transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(180));
     completion: ^(BOOL finished)
    
        self.refreshControlSpinningImageView.transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(0));

        [self.refreshButton setCustomView:nil];
      ];
 

#pragma mark - IBAction(s)

- (IBAction)refreshTapped:(UIBarButtonItem *)sender;

  //deletia

  [self animateRefreshButton];

这是修复的视频：