如何为UIImageView局部设置Alpha值？拖拽UIView交互效果实现

嘿，这个需求其实挺直观的，核心就是利用视图的Alpha属性来控制遮挡关系，我给你梳理下具体实现思路和代码示例：

首先得确认你的视图层级是这样的（从下到上）：

• 最底层：显示绿色图片的UIImageView（铺满整个父视图）
• 中间层：显示蓝色图片的UIImageView（同样铺满父视图，默认被顶层视图遮挡）
• 最上层：可拖动的UIView（初始状态用不透明的绿色背景，和底层图颜色一致，这样平时看起来和绿色融为一体，挡住中间的蓝色图）

当你拖动顶层UIView时，通过修改它的Alpha值，让它从“不透明遮挡蓝色”变成“透明露出蓝色”，就能实现你要的效果。

import UIKit

class ViewController: UIViewController {
    // 定义三个核心视图
    private let greenImageView = UIImageView(image: UIImage(named: "green"))
    private let blueImageView = UIImageView(image: UIImage(named: "blue"))
    private let draggableView = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupViews()
        addPanGesture()
    }
    
    // 初始化布局视图
    private func setupViews() {
        // 绿色底层图
        greenImageView.frame = view.bounds
        greenImageView.contentMode = .scaleAspectFill
        view.addSubview(greenImageView)
        
        // 蓝色中间层图
        blueImageView.frame = view.bounds
        blueImageView.contentMode = .scaleAspectFill
        view.addSubview(blueImageView)
        
        // 可拖动的顶层视图
        draggableView.frame = CGRect(x: 50, y: 100, width: 200, height: 200)
        draggableView.backgroundColor = .green // 和底层图颜色匹配，初始完全不透明
        draggableView.isUserInteractionEnabled = true
        view.addSubview(draggableView)
    }
    
    // 添加拖拽手势
    private func addPanGesture() {
        let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePanGesture(_:)))
        draggableView.addGestureRecognizer(panGesture)
    }
    
    // 处理拖拽逻辑
    @objc private func handlePanGesture(_ gesture: UIPanGestureRecognizer) {
        // 更新视图位置
        let translation = gesture.translation(in: view)
        draggableView.center = CGPoint(
            x: draggableView.center.x,
            y: draggableView.center.y + translation.y
        )
        gesture.setTranslation(.zero, in: view)
        
        // 根据手势状态调整Alpha
        switch gesture.state {
        case .began, .changed:
            // 拖动过程中让视图完全透明，露出蓝色
            draggableView.alpha = 0.0
            
            // 如果要渐变效果，可以根据拖动距离动态调整，比如：
            // let progress = min(1.0, abs(translation.y) / 100)
            // draggableView.alpha = 1.0 - progress
        case .ended, .cancelled:
            // 拖动结束后恢复不透明，重新遮挡蓝色
            draggableView.alpha = 1.0
        default:
            break
        }
    }
}

#import "ViewController.h"

@interface ViewController ()
@property (nonatomic, strong) UIImageView *greenImageView;
@property (nonatomic, strong) UIImageView *blueImageView;
@property (nonatomic, strong) UIView *draggableView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self setupViews];
    [self addPanGesture];
}

- (void)setupViews {
    // 绿色底层图
    self.greenImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"green"]];
    self.greenImageView.frame = self.view.bounds;
    self.greenImageView.contentMode = UIViewContentModeScaleAspectFill;
    [self.view addSubview:self.greenImageView];
    
    // 蓝色中间层图
    self.blueImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"blue"]];
    self.blueImageView.frame = self.view.bounds;
    self.blueImageView.contentMode = UIViewContentModeScaleAspectFill;
    [self.view addSubview:self.blueImageView];
    
    // 可拖动顶层视图
    self.draggableView = [[UIView alloc] initWithFrame:CGRectMake(50, 100, 200, 200)];
    self.draggableView.backgroundColor = [UIColor greenColor];
    self.draggableView.userInteractionEnabled = YES;
    [self.view addSubview:self.draggableView];
}

- (void)addPanGesture {
    UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePanGesture:)];
    [self.draggableView addGestureRecognizer:panGesture];
}

- (void)handlePanGesture:(UIPanGestureRecognizer *)gesture {
    // 更新视图位置
    CGPoint translation = [gesture translationInView:self.view];
    CGPoint center = self.draggableView.center;
    center.y += translation.y;
    self.draggableView.center = center;
    [gesture setTranslation:CGPointZero inView:self.view];
    
    // 根据手势状态调整Alpha
    switch (gesture.state) {
        case UIGestureRecognizerStateBegan:
        case UIGestureRecognizerStateChanged:
            self.draggableView.alpha = 0.0;
            
            // 渐变效果示例：
            // CGFloat progress = MIN(1.0, fabs(translation.y) / 100);
            // self.draggableView.alpha = 1.0 - progress;
            break;
        case UIGestureRecognizerStateEnded:
        case UIGestureRecognizerStateCancelled:
            self.draggableView.alpha = 1.0;
            break;
        default:
            break;
    }
}

@end

1. 如果你的绿色图不是纯色，而是带纹理的图片，可以把顶层draggableView的背景色换成绿色图的快照，这样遮挡效果更自然。
2. 要是想实现“拖动过的区域永久显示蓝色”，那可以把顶层视图换成CAShapeLayer做蒙版，不过这就超出单纯修改Alpha的范围了，你要是需要我再补充。

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