UIBarButton切换图片动画时两图重叠问题求助

我明白你遇到的麻烦了——直接替换UIButton的背景图会导致两张图片在切换瞬间重叠，这是因为按钮内部的图层更新和你的动画节奏不同步，旧图还没完全“退场”，新图就已经“登场”了。你的核心思路没问题，但用同一个UIButton的backgroundImage来切换图片的方式，没法精确控制两张图的显示时机，才会出现重叠。

解决方案：用双UIImageView分层控制 #

最好的办法是在你的自定义按钮（hamButton）里添加两个独立的UIImageView，分别对应两张图片，通过控制它们的alpha值来实现淡入淡出，这样两张图完全在各自的图层上，不会出现重叠问题。

第一步：初始化分层视图

先在你的按钮里添加两个UIImageView，把第一张图设为默认显示，第二张图默认隐藏：

// 假设你已经有firstImage和secondImage两个UIImage对象
// 初始化第一张图的ImageView
UIImageView *firstImageView = [[UIImageView alloc] initWithImage:firstImage];
firstImageView.frame = self.hamButton.bounds;
firstImageView.contentMode = UIViewContentModeScaleAspectFit; // 保持图片比例
[self.hamButton addSubview:firstImageView];
self.firstImageView = firstImageView; // 存为属性方便后续控制

// 初始化第二张图的ImageView
UIImageView *secondImageView = [[UIImageView alloc] initWithImage:secondImage];
secondImageView.frame = self.hamButton.bounds;
secondImageView.contentMode = UIViewContentModeScaleAspectFit;
secondImageView.alpha = 0; // 默认隐藏
[self.hamButton addSubview:secondImageView];
self.secondImageView = secondImageView;

第二步：重写动画逻辑

现在不需要再替换backgroundImage了，直接控制两个ImageView的alpha即可，动画逻辑更清晰，也不会有重叠：

// I. 淡出第一张图
[UIView animateWithDuration:0.2 delay:1.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
    self.firstImageView.alpha = 0;
} completion:^(BOOL finished) {
    // II. 淡入第二张图
    [UIView animateWithDuration:0.6 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
        self.secondImageView.alpha = 1;
    } completion:^(BOOL finished) {
        // III. 淡出第二张图
        [UIView animateWithDuration:0.6 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
            self.secondImageView.alpha = 0;
        } completion:^(BOOL finished) {
            // IV. 淡入第一张图
            [UIView animateWithDuration:0.6 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
                self.firstImageView.alpha = 1;
            } completion:nil];
        }];
    }];
}];

为什么原来的方法会出问题？ #

当你在动画完成后直接调用setBackgroundImage:，UIButton会立即更新内部的背景图层，但这个操作和你的alpha动画是异步的，可能出现旧图还没完全消失（虽然alpha是0，但图层还没被销毁），新图就已经渲染出来的情况，导致视觉上的重叠。而用两个独立的ImageView，你能完全掌控每张图的显示状态，从根源上避免这个问题。

另外注意：UIViewAnimationCurveEaseOut是旧的枚举值，建议换成UIViewAnimationOptionCurveEaseOut（iOS 4.0+支持），兼容性更好。

内容的提问来源于stack exchange，提问作者user6631314