ios 动画文本位置

ds97pgxw  于 2023-03-31  发布在  iOS
关注(0)|答案(1)|浏览(160)

我正在做一个自定义进度条。我有一个文本,我想在动画时随着进度移动。但相反,文本消失了,并在新的位置重新出现(见下面的gif)。
验证码:

private struct MyProgressBar: View {
    let progress: Double
    
    var body: some View {
        RoundedRectangle(cornerRadius: 5)
            .frame(height: 20)
            .foregroundColor(.gray)
            .overlay(alignment: .leading) {
                GeometryReader { geo in
                    let progressWidth = geo.size.width * progress
                    RoundedRectangle(cornerRadius: 5)
                        .foregroundColor(.yellow)
                        .frame(width: progressWidth)
                        .overlay(alignment: .topTrailing) {
                            bubble(progress)
                                .fixedSize()
                                .alignmentGuide(HorizontalAlignment.trailing) { d in
                                    d[HorizontalAlignment.center]
                                }
                                .alignmentGuide(VerticalAlignment.top) { d in
                                    d[.bottom]
                                }
                        }
                }
            }
        .padding()
    }
    
    @ViewBuilder
    private func bubble(_ progress: Double) -> some View {
        Text(progress.formatted(.percent))
            .monospacedDigit()
            .padding(5.0)
            .background {
                RoundedRectangle(cornerRadius: 2)
                    .foregroundColor(.green)
            }

    }
}

struct MyProgressBarExample: View {
    @State private var progress: Double = 0.3
    
    var body: some View {
        VStack {
            MyProgressBar(progress: progress)
            VStack {
                Button("change") {
                    withAnimation() {
                        progress = Double.random(in: 0.0...1.0)
                    }
                }
                Slider(
                    value: $progress.animation(),
                    in: 0.0...1.0,
                    step: 0.005
                )
                    .padding()
            }
        }
    }
}

对于动态值,文本会消失并重新出现,但如果我将文本更改为一些常量字符串,如“hello”,则它会移动得很好。
第一节第一节第一节第一节第一次
如何使绿色背景的文字移动而不是出现和消失?

h6my8fg2

h6my8fg21#

.drawingGroup添加到气泡中。也不要认为它必须是ViewBuilder

private func bubble(_ progress: Double) -> some View {
        Text(progress.formatted(.percent))
            .monospacedDigit()
            .padding(5.0)
            .background {
                RoundedRectangle(cornerRadius: 2)
                    .foregroundColor(.green)
            }
            .drawingGroup() // <-- HERE
    }

相关问题