SwiftUI.delay影片時間在離開和回來查看后不正確

此影片在第一次查看時按預期運行，但當退出應用程式然后進入時（或者如果您離開螢屏并回傳），時間會隨機混亂。怎么修改這段代碼，讓離開螢屏回來后的影片時序保持一致？

可以通過退出并回傳應用程式幾次來重新創建錯誤。

import SwiftUI

struct ExampleView: View {
@State var isAnimating: Bool = false

let timing =  4.0
let maxCounter: Int = 3

var body: some View {
    ZStack {
        Circle()
            .stroke(
                Color.blue.opacity(isAnimating ? 0.0 : 1.0),
                style: StrokeStyle(lineWidth: isAnimating ? 0.0 : 15.0))
            .scaleEffect(isAnimating ? 1.0 : 0.0)
            .animation(
                Animation.easeOut(duration: timing)
                .repeatForever(autoreverses: false)
                .delay(Double(0) * timing / Double(maxCounter) / Double(maxCounter)), value: isAnimating)
        
        Circle()
            .stroke(
                Color.blue.opacity(isAnimating ? 0.0 : 1.0),
                style: StrokeStyle(lineWidth: isAnimating ? 0.0 : 15.0))
            .scaleEffect(isAnimating ? 1.0 : 0.0)
            .animation(
                Animation.easeOut(duration: timing)
                .repeatForever(autoreverses: false)
                .delay(Double(1) * timing / Double(maxCounter) / Double(maxCounter)), value: isAnimating)
        Circle()
            .stroke(
                Color.blue.opacity(isAnimating ? 0.0 : 1.0),
                style: StrokeStyle(lineWidth: isAnimating ? 0.0 : 15.0))
            .scaleEffect(isAnimating ? 1.0 : 0.0)
            .animation(
                Animation.easeOut(duration: timing)
                .repeatForever(autoreverses: false)
                .delay(Double(2) * timing / Double(maxCounter) / Double(maxCounter)), value: isAnimating)
    }
    .frame(width: 200, height: 200, alignment: .center)
    .onAppear {
        isAnimating = true
    }
}
}

uj5u.com熱心網友回復：

這是適合您的正確方法，它需要使用 DispatchQueue 和 scenePhase：

PS：我注意到 Xcode 對你的原始代碼有很多抱怨！我重構了你的代碼并解決了那些抱怨。

struct ExampleView: View { 
    var body: some View {
        ZStack {
            CustomCircleAnimationView(delayValue: 0.0)
            CustomCircleAnimationView(delayValue: 1.0)
            CustomCircleAnimationView(delayValue: 2.0)
        }
        .frame(width: 200, height: 200)  
    }
}


struct CustomCircleAnimationView: View {
    
    @Environment(\.scenePhase) private var scenePhase
    
    let delay: Double
    private let timing: Double
    private let maxCounter: Double
    @State private var startAnimation: Bool = false
    
    init(timing: Double =  4.0, maxCounter: Double = 3.0, delayValue: Double) {
        self.timing = timing
        self.maxCounter = maxCounter
        self.delay = (delayValue*timing)/(maxCounter*maxCounter)
    }
    
    var body: some View { if (scenePhase == .active) { circle } }
    
    var circle: some View {
        
        return Circle()
            .stroke(Color.blue, style: StrokeStyle(lineWidth: startAnimation ? 0.001 : 15.0))
            .scaleEffect(startAnimation ? 1.0 : 0.001)
            .opacity(startAnimation ? 0.001 : 1.0)
            .onAppear { DispatchQueue.main.async { startAnimation = true } }
            .onDisappear { startAnimation = false }
            .animation(Animation.easeOut(duration: timing).repeatForever(autoreverses: false).delay(delay), value: startAnimation)
        
    }
}

uj5u.com熱心網友回復：

我最近也發生了這種情況，似乎可以解決問題的兩件事是給每個人Circle自己的東西@State并延遲@State.

import SwiftUI

struct CirclieAnimView: View {
    @Environment(\.scenePhase) var scenePhase: ScenePhase
    let timing:Double =  4.0
    let maxCounter: Int = 3
    
    var body: some View {
        ZStack {
            ForEach(0..<maxCounter){n in
                MyAnimCircle( timing: timing, maxCounter: maxCounter, n: n)
            }
        }
        
        .frame(width: 200, height: 200, alignment: .center)
        
    }
}
struct MyAnimCircle:View{
    @State var isAnimating: Bool = false
    let timing:Double
    let maxCounter: Int
    let n: Int
    var body: some View{
        Circle()
            .stroke(
                Color.blue.opacity(isAnimating ? 0.0 : 1.0),
                style: StrokeStyle(lineWidth: isAnimating ? 0.0 : 15.0))
            .scaleEffect(isAnimating ? 1.0 : 0.0)
            .animation(
                Animation.easeOut(duration: timing)
                    .repeatForever(autoreverses: false)
                    .delay(Double(n) * timing / Double(maxCounter) / Double(maxCounter)), value: isAnimating)
            .onAppear {
                DispatchQueue.main.asyncAfter(deadline: .now()   0.05){
                    isAnimating = true
                }
            }
    }
}
struct CirclieAnimView_Previews: PreviewProvider {
    static var previews: some View {
        CirclieAnimView()
    }
}

標籤：ios 迅速 迅捷 swiftui-动画

上一篇：ReactNativePushNotifications不適用于Android，但適用于iOS

下一篇：為什么我的UI組件沒有顯示在模擬器上