Swift实现两个UIView卡片翻转动画 切换时一个隐藏一个显示

要实现你需要的卡片3D翻转效果，需要先修正原有实现的两个核心问题：

• 没有给父容器添加3D透视变换，导致动画是2D扁平化效果
• 两个视图的过渡动画没有同步，且未共用同一个容器的过渡上下文

前置准备 #

将两个需要翻转的视图vu1、vu2添加到同一个父容器视图containerView中，两者frame完全一致，初始状态设置vu1.isHidden = false，vu2.isHidden = true。

完整实现代码 #

func flipCard(containerView: UIView, frontView: UIView, backView: UIView, direction: UIView.AnimationOptions = .transitionFlipFromLeft, duration: TimeInterval = 1.0) {
    // 添加3D透视效果
    var perspective = CATransform3DIdentity
    perspective.m34 = -1.0 / 500 // 数值越小透视效果越强
    containerView.layer.sublayerTransform = perspective
    
    // 执行统一过渡动画
    UIView.transition(with: containerView, duration: duration, options: [direction, .showHideTransitionViews]) {
        frontView.isHidden = true
        backView.isHidden = false
    } completion: { _ in
        // 可选：复位透视变换，避免影响容器内其他视图动画
        containerView.layer.sublayerTransform = CATransform3DIdentity
    }
}

调用示例 #

从左侧翻转，显示vu2隐藏vu1：

flipCard(containerView: self.view, frontView: vu1, backView: vu2, direction: .transitionFlipFromLeft)

从顶部翻转，显示vu1隐藏vu2：

flipCard(containerView: self.view, frontView: vu2, backView: vu1, direction: .transitionFlipFromTop)

关键参数说明 #

• .showHideTransitionViews 选项保证动画过程中只会控制两个视图的显隐，不会把原有视图从父视图移除，符合你的需求
• perspective.m34 控制3D翻转的透视强度，可根据视觉效果调整数值
• 方向可选值：.transitionFlipFromLeft、.transitionFlipFromRight、.transitionFlipFromTop、.transitionFlipFromBottom，可以直接切换翻转方向

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