如何在SwiftUI中使用Splitflap库实现翻牌式文字动效？

现有封装代码的问题 #

• 错误将datasource指定为splitflapView本身，该组件要求外部对象实现数据源方法，无法自己作为数据源
• 未实现必填的数据源方法numberOfFlapsInSplitflap，组件无法确定翻牌数量
• updateUIView为空，无法支持动态更新显示文本

修正后的UIViewRepresentable封装代码 #

通过Coordinator作为数据源载体即可正常使用，完整封装代码如下：

import SwiftUI
import Splitflap

struct SplitflapView: UIViewRepresentable {
    // 外部绑定要显示的文本
    @Binding var text: String
    // 翻牌数量，需大于等于需要显示的最长文本长度
    let flapCount: Int
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    func makeUIView(context: Context) -> Splitflap {
        let splitflapView = Splitflap(frame: .zero)
        // 指定Coordinator为数据源
        splitflapView.datasource = context.coordinator
        // 初始设置文本
        splitflapView.setText(text, animated: true)
        return splitflapView
    }
    
    func updateUIView(_ uiView: Splitflap, context: Context) {
        // 外部文本变化时自动更新显示
        uiView.setText(text, animated: true)
    }
    
    // 数据源载体类
    class Coordinator: NSObject, SplitflapDataSource {
        let parent: SplitflapView
        
        init(_ parent: SplitflapView) {
            self.parent = parent
        }
        
        func numberOfFlapsInSplitflap(_ splitflap: Splitflap) -> Int {
            return parent.flapCount
        }
    }
}

使用示例 #

在SwiftUI视图中直接调用即可，示例代码：

struct ContentView: View {
    // 要显示的文本，可动态修改
    @State private var showText = "Hello"
    
    var body: some View {
        SplitflapView(text: $showText, flapCount: 5)
            .frame(width: 370, height: 53)
            .onTapGesture {
                // 点击切换文本测试动画效果
                showText = showText == "Hello" ? "World" : "Hello"
            }
    }
}

纯SwiftUI实现备选方案 #

如果不想依赖UIKit桥接，可以自己实现轻量翻牌动效：每个字符对应一个独立视图，用rotation3DEffect实现Y轴翻转逻辑，切换字符时先翻转到90度替换文本，再翻转回0度，即可实现同类翻牌效果。

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