动画视图奇怪地浮动到位 SwiftUI [英] Animated view floats into place weirdly SwiftUI

问题描述

所以我有一个这样声明的圆形进度条

So I have a circular progress bar that is declared like this

struct ProgressBar: View {
    var progress: CGFloat
    var body: some View {
        let gradient = LinearGradient(...)
        ZStack {
            Circle()
                .stroke(lineWidth: 25)
                .opacity(0.3)
                .foregroundColor(Color.secondary)
            
            Circle()
                .trim(from: 0.0, to: CGFloat(min(self.progress, 1.0)))
                .stroke(gradient ,style: StrokeStyle(lineWidth: 25.0, lineCap: .round, lineJoin: .round))
                .rotationEffect(Angle(degrees: 270.0))
                .animation(.linear)
        }
    }
}

变量进度被传递到视图中，只是值/总数的简单划分，我有两个按钮来减少或增加值，我使用动画干净地更新进度.

The variable progress is passed into the view and is just simple division of value/total where I have two buttons to reduce or increase value and I use the animation to update the progress cleanly.

我在另一个名为 DetailView 的视图中调用此视图

I call this view in another view called DetailView

但是由于某种原因，当我从另一个视图导航到 DetailView 时，第二个 secondView 从顶部浮动.发生了什么?

However for some reason the second secondView floats in from the top when I navigate to DetailView from another view. What is happening?

我不确定这是否是一个常见问题，但如果对您有帮助，我可以分享一个视频.

Im not sure if this is a common issue but I can share a video if that might help you.

这里有一个例子.

import SwiftUI

struct ContentView: View {
    
    @State var bookData: [Book] = load("list")
    @State private var selectedBook: Book? = nil
    @State var showOnboarding = false
    var body: some View {
        NavigationView {
                Form {
                    Section{
                        ForEach(bookData){ bookDetail in
                            NavigationLink(
                                destination: PageDetail(bookData: $bookData, book: bookDetail),
                                label: {
                                    BookView(book: bookDetail)
                                })
                                }
                        }
             }
      }
}

import SwiftUI

struct PageDetail: View {
    
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
    @Binding var bookData: [Book]
    @State var count = 0
    
    var progress: CGFloat{
        let page = value
        let total = Int(book.total) ?? 1
        
        let answer = CGFloat(page)/CGFloat(total)
        return answer
    }
    var value: Int{
        let page = Int(book.page) ?? 1
        let cnt = count
        let calc = page + cnt
        return calc
    }

    var book: Book{
    
    var body: some View {
        ZStack{
            LinearGradient(...)
            
            VStack {
                VStack(spacing: -25){
                    ProgressBar(page: value,total: book.total ,progress: progress)
                        .frame(width: 250, height: 300)
                        .padding(.horizontal, 20)
                    HStack {
                        Button(action: {
                            self.count -= 1
                        }, label: {
                            Image(systemName: "minus.circle")
                        })


                        Button(action: {
                            self.count += 1
                        }, label: {
                            Image(systemName: "plus.circle")
                        })

                    }
                }
                
            }
        }
}
struct ProgressBar: View {
    var page: Int
    var total: String
    var progress: CGFloat
    var body: some View {
        let gradient = LinearGradient(...)
        ZStack {
            Circle()
                .stroke(lineWidth: 25)
                .opacity(0.3)
                .foregroundColor(Color.secondary)
            
            Circle()
                .trim(from: 0.0, to: CGFloat(min(self.progress, 1.0)))
                .stroke(gradient ,style: StrokeStyle(lineWidth: 25.0, lineCap: .round, lineJoin: .round))
                .rotationEffect(Angle(degrees: 270.0))
                .animation(.linear)
        }
    }
}

struct PageDetail_Previews: PreviewProvider {
    @State static var previewed = testData
    static var previews: some View {
        PageDetail(bookData: $previewed, book: previewed[0])
    }
}

推荐答案

唯一的想法 - 尝试使动画值依赖，如下图

Only idea - try to make animation value dependent, like below

Circle()
    .trim(from: 0.0, to: CGFloat(min(self.progress, 1.0)))
    .stroke(gradient ,style: StrokeStyle(lineWidth: 25.0, lineCap: .round, lineJoin: .round))
    .rotationEffect(Angle(degrees: 270.0))
    .animation(.linear, value: progress)    // << here !!

这篇关于动画视图奇怪地浮动到位 SwiftUI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！