视图修改器弄乱了动画

Question

我一直在为我的项目添加一个加载指示器，并在这里找到了一个非常酷的动画。 为了使其更易于使用，我想将其合并到视图修饰符中，以将其置于当前视图之上。 但是，当我这样做时，当我第一次按下按钮时它不会动画。 我已经玩了一点，我的假设是 View Modifier 没有传递初始的isAnimating = false ，所以只在按下按钮时传递它isAnimating = true 。 因为ArcsAnimationView最初没有得到 false 值，所以它实际上并没有动画任何东西，只是显示静态弧。 但是，如果我之后再次按下该按钮，它似乎已被初始化，并且视图会根据需要正确设置动画。

有没有更好的方法来构建我的代码以避免这个问题？ 我错过了什么关键吗？ 任何帮助是极大的赞赏。

下面是完整的代码：

import SwiftUI

struct ArcsAnimationView: View {
    @Binding var isAnimating: Bool
    let count: UInt = 4
    let width: CGFloat = 5
    let spacing: CGFloat = 2
    
    init(isAnimating: Binding<Bool>) {
        self._isAnimating = isAnimating
    }

    var body: some View {
        GeometryReader { geometry in
            ForEach(0..<Int(count)) { index in
                item(forIndex: index, in: geometry.size)
// the rotation below is what is animated ... 
// I think the problem is that it just starts at .degrees(360), instead of
// .degrees(0) as expected, where it is then animated to .degrees(360)
                    .rotationEffect(isAnimating ? .degrees(360) : .degrees(0))
                    .animation(
                        Animation.default
                            .speed(Double.random(in: 0.05...0.25))
                            .repeatCount(isAnimating ? .max : 1, autoreverses: false)
                        , value: isAnimating
                    )
                    .foregroundColor(Color(hex: AppColors.darkBlue1.rawValue))
            }
        }
       
        .aspectRatio(contentMode: .fit)
        
    }

    private func item(forIndex index: Int, in geometrySize: CGSize) -> some View {
        Group { () -> Path in
            var p = Path()
            p.addArc(center: CGPoint(x: geometrySize.width/2, y: geometrySize.height/2),
                     radius: geometrySize.width/2 - width/2 - CGFloat(index) * (width + spacing),
                     startAngle: .degrees(0),
                     endAngle: .degrees(Double(Int.random(in: 120...300))),
                     clockwise: true)
            return p.strokedPath(.init(lineWidth: width))
        }
        .frame(width: geometrySize.width, height: geometrySize.height)
    }
}


struct ArcsAnimationModifier: ViewModifier {
    @Binding var isAnimating: Bool
    
    func body(content: Content) -> some View {
        ZStack {
            if isAnimating {
                ArcsAnimationView(isAnimating: _isAnimating)
                    .frame(width: 150)
            }
            content
                .disabled(isAnimating)
        }       
    }
}

extension View {
    func loadingAnimation(isAnimating: Binding<Bool>) -> some View {
        self.modifier(ArcsAnimationModifier(isAnimating: isAnimating))
    }
}

这是我实际调用该函数的地方：

struct AnimationView: View {
    
    @State var isAnimating = false

    var body: some View {
        
        VStack {
        Button(action: {
            self.isAnimating = true
            
            DispatchQueue.main.asyncAfter(deadline: .now() + 4) {
                self.isAnimating = false
            }
        }, label: {
            Text("show animation")
        })  
        }
        .loadingAnimation(isAnimating: $isAnimating)
        
    }
}

注意：我相当确定问题出在 View Modifier 上，因为如果我在AnimationView ArcsAnimationView作为常规视图调用，它会按预期工作。

Answer 1

我到那里看一些实现，但我认为其他人更喜欢从简单的基础开始。 这里我的 2 美分展示了如何编写一个可用于多个对象的 AnimatableModifier，用于清理代码中的“.animation”。

struct ContentView: View {
    @State private var hideWhilelUpdating = false
    
    var body: some View {
        
    Image(systemName: "tshirt.fill")
        .modifier(SmoothHideAndShow(hide: hideWhilelUpdating))

        Text("Some contents to show...")
            .modifier(SmoothHideAndShow(hide: hideWhilelUpdating))

        Button( "hide and show smootly") {
            hideWhilelUpdating.toggle()
        }
        .padding(60)
    }
}


struct SmoothHideAndShow: AnimatableModifier {
    var hide: Bool

    var animatableData: CGFloat {
        get { CGFloat(hide ? 0 : 1) }
        set { hide = newValue == 0 }
    }

    func body(content: Content) -> some View {
        content
        .opacity(hide  ? 0.2 : 1)
            .animation(.easeIn(duration: 1), value: hide)

    }
}

当按下按钮时，我们的 bool 将触发淡入淡出我们的文本的动画。 我在网络调用期间使用它（为清楚起见省略......并用按钮替换）来隐藏远程更新下的值。 当网络返回时，我切换布尔值。