简体   繁体   English

SwiftUI 动画 RoundedRectangle 的宽度从 0 到宽度 onAppear?

[英]SwiftUI animating the width of RoundedRectangle from 0 to width onAppear?

I thought I had written this correctly, but the RoundedRectangle isn't animating...What am I missing?我以为我写得对,但是 RoundedRectangle 没有动画……我错过了什么?

struct BarView: View {
    
    var progress: Double = 0.0
    
     var progressAnimation: Animation {
        Animation
            .linear
            .speed(0.5)
            .delay(0.02)
     }
    
    var body: some View {
        
        ZStack {
                ZStack(alignment: .leading) {
                    RoundedRectangle(cornerRadius: 12.0)
                        .fill(Color(.lightGray))
                        .opacity(0.1)
                        .frame(height: 15)
                        .overlay(GeometryReader { geometry in
                    RoundedRectangle(cornerRadius: 12.0)
                        .fill(getColorForBar(progress: progress))
                        .frame(width: getFillWidth(progress: progress, geometry: geometry), height: 15)
                        .animation(self.progressAnimation)
                         }, alignment: .leading)
                }
        }
    }

Here is a bit modified code that works with Xcode 12.1 / iOS 14.1.这是与 Xcode 12.1 / iOS 14.1 一起使用的修改代码。 So the issue might be either in place of usage or in getFillWidth function.所以问题可能出在使用或getFillWidth function 中。

演示

struct TestBarView: View {
    @State private var value = 0.0
    var body: some View {
        BarView(progress: value)
            .onAppear {
                value = 0.8
            }
    }
}

struct BarView: View {
    
    var progress: Double = 0.0
    
    var progressAnimation: Animation {
        Animation
            .linear
            .speed(0.5)
            .delay(0.02)
    }
    
    var body: some View {
        
        ZStack {
            ZStack(alignment: .leading) {
                RoundedRectangle(cornerRadius: 12.0)
                    .fill(Color(.lightGray))
                    .opacity(0.1)
                    .frame(height: 15)
                    .overlay(GeometryReader { geometry in
                        RoundedRectangle(cornerRadius: 12.0)
                            .fill(Color.blue)
                            .frame(width: geometry.size.width * CGFloat(progress), height: 15)
                            .animation(self.progressAnimation)
                    }, alignment: .leading)
            }
        }
    }
}

backup 备份

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM