当视图出现在 SwiftUI 中时禁用动画

Question

尝试在 SwiftUI 中显示自定义加载视图时遇到问题。 我创建了一个自定义结构视图 OrangeActivityIndi​​cator：

struct OrangeActivityIndicator: View {
    var style = StrokeStyle(lineWidth: 6, lineCap: .round)
    @State var animate = false
    let orangeColor = Color.orOrangeColor
    let orangeColorOpaque = Color.orOrangeColor.opacity(0.5)
    
    init(lineWidth: CGFloat = 6) {
        style.lineWidth = lineWidth
    }
    
    var body: some View {
        ZStack {
            Circle()
                .trim(from: 0, to: 0.7)
                .stroke(
                    AngularGradient(gradient: .init(colors: [orangeColor, orangeColorOpaque]), center: .center), style: style
                )
                .rotationEffect(Angle(degrees: animate ? 360 : 0))
                .animation(Animation.linear(duration: 0.7).repeatForever(autoreverses: false))
        }.onAppear() {
            self.animate.toggle()
        }
    }
}

我在不同的屏幕或视图中使用它，我的问题是它看起来很奇怪，例如在应用程序的 CampaignsView 中我在服务器调用正在进行时显示它。

struct CampaignsView: View {
    
    @ObservedObject var viewModel: CampaignsViewModel
    
    var body: some View {
        NavigationView {
            ZStack {
                VStack(spacing: 0) {
                    CustomNavigationBar(campaignsNumber: viewModel.cardCampaigns.count)
                        .padding([.leading, .trailing], 24)
                        .frame(height: 25)
                    CarouselView(x: $viewModel.x, screen: viewModel.screen, op: $viewModel.op, count: $viewModel.index, cardCampaigns: $viewModel.cardCampaigns).frame(height: 240)
                    CampaignDescriptionView(idx: viewModel.index, cardCampaigns: viewModel.cardCampaigns)
                        .padding([.leading, .trailing], 24)
                    Spacer()
                }
                .onAppear {
                    self.viewModel.getCombineCampaigns()
                }
                if viewModel.isLoading {
                    OrangeActivityIndicator()
                        .frame(width: 40, height: 40)
                }
            }
            .padding(.top, 34)
            .background(Color.orBackgroundGrayColor.edgesIgnoringSafeArea(.all))
            .navigationBarHidden(true)
        }
    }
}

指示器本身是正确旋转的，问题是当它出现时，它显示为从屏幕底部到中间的平移动画。这是我的带有服务器调用和 isLoading 属性的 viewModel：

class CampaignsViewModel: ObservableObject {
    
    @Published var index: Int = 0
    @Published var cardCampaigns: [CardCampaign] =  [CardCampaign]()
    @Published var isLoading: Bool = false

    var cancellable: AnyCancellable?


    
    func getCombineCampaigns() {
        self.isLoading = true
        let campaignLoader = CampaignLoader()
        cancellable = campaignLoader.getCampaigns()
            .receive(on: DispatchQueue.main)
            //Handle Events operator is used for debugging.
            .handleEvents(receiveSubscription: { print("Receive subscription: \($0)") },
                          receiveOutput: { print("Receive output: \($0)") },
                          receiveCompletion: { print("Receive completion: \($0)") },
                          receiveCancel: { print("Receive cancel") },
                          receiveRequest: { print("Receive request: \($0)") })
            .sink { completion in
                switch completion {
                case .finished:
                    break
                case .failure(let error):
                    print(error)
                }
            } receiveValue: { campaignResult in
                self.isLoading = false
                guard let campaignsList = campaignResult.content else {
                    return
                }
                self.cardCampaigns = campaignsList.map { campaign in
                    return CardCampaign(campaign: campaign)
                }
                self.moveToFirstCard()
            }
    }
}

Answer 1

使用关联状态的动画

var body: some View {
    ZStack {
        Circle()
            .trim(from: 0, to: 0.7)
            .stroke(
                AngularGradient(gradient: .init(colors: [orangeColor, orangeColorOpaque]), center: .center), style: style
            )
            .rotationEffect(Angle(degrees: animate ? 360 : 0))
            .animation(Animation.linear(duration: 0.7)
                                .repeatForever(autoreverses: false), 
                       value: animate)                              // << here !!
    }.onAppear() {
        self.animate.toggle()
    }
}

Answer 2

SwiftUI 3 (iOS 15)

使用新的 API

.animation(.default, value: isAppeared)

---

SwiftUI 1、2

如下所示，当我第一次加载视图时，按钮是动画的。

所以，我使用了 GeometryReader。

当假人的坐标发生变化时，动画被设置为 nil。

RecordView.swift

struct RecordView: View {
    var body: some View {
        Button(action: { }) {
            Color(.red)
                .frame(width: 38, height: 38)
                .cornerRadius(6)
                .padding(34)
                .overlay(Circle().stroke(Color(.red), lineWidth: 8))
        }
        .buttonStyle(ButtonStyle1()) // ? customize the button.
    }
}

ButtonStyle.swift

import SwiftUI

struct ButtonStyle1: ButtonStyle {

    // In my case, the @State isn't worked, so I used class.
    @ObservedObject private var data = ButtonStyle1Data()


    func makeBody(configuration: Self.Configuration) -> some View {
        ZStack {
            // Dummy for tracking the view status
            GeometryReader {
                Color.clear
                    .preference(key: FramePreferenceKey.self, value: $0.frame(in: .global))
            }
            .frame(width: 0, height: 0)
            .onPreferenceChange(FramePreferenceKey.self) { frame in
                guard !data.isAppeared else { return }

                // ⬇️ This is the key
                data.isLoaded = 0 <= frame.origin.x
            }
        
            // Content View
            configuration.label
                .opacity(configuration.isPressed ? 0.5 : 1)
                .scaleEffect(configuration.isPressed ? 0.92 : 1)
                .animation(data.isAppeared ? .easeInOut(duration: 0.18) : nil)
        }
    }
}

ButtonStyleData.swift

final class ButtonStyle1Data: ObservableObject {

    @Published var isAppeared = false

}

FramePreferenceKey.swift

struct FramePreferenceKey: PreferenceKey {

    static var defaultValue: CGRect = .zero

    static func reduce(value: inout CGRect, nextValue: () -> CGRect) {}
}

结果