【问题标题】:How to disable position animation in SwiftUI?如何在 SwiftUI 中禁用位置动画?
【发布时间】:2020-10-10 00:22:12
【问题描述】:

我想以编程方式滚动VStack,并且一些子视图可以独立设置动画,但是当更改VStack 的偏移量时,动画子视图移动到动画的最终位置,这不是我想要的并且如何禁用动画这个位置变化? 这是我的演示代码,

import SwiftUI

struct ContentView: View {
    @State var angle:Double = 0
    @State var offset = 0
    var body: some View {
            LazyVStack {
                ForEach((0..<100)) { i in
                    if i == 25 {
                        Rectangle()
                            .frame(width: 30, height: 30)
                            .animation(.none)
                            .rotationEffect(.degrees(angle), anchor: .center)
                            .animation(Animation.linear(duration: 3).repeatForever(autoreverses: false))
                            .onAppear {
                                angle = 360
                            }
                    } else {
                        Text("number \(i)")
                    }
                }
            }
            .offset(y: CGFloat(offset))
            .animation(.none)
            .onAppear {
                offset = 200
            }
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

以及效果,

【问题讨论】:

    标签: ios swift swiftui vstack


    【解决方案1】:

    尝试以下方法(在 Xcode 12.0.1、iOS14 中测试):

    设置angle时使用显式动画调用:

    import SwiftUI
    
    struct ContentView: View {
        @State var angle:Double = 0
        @State var offset = 0
        var body: some View {
            LazyVStack {
                ForEach((0..<100)) { i in
                    if i == 25 {
                        Rectangle()
                            .frame(width: 30, height: 30)
                            .rotationEffect(.degrees(angle), anchor: .center)
                            .onAppear {
                                withAnimation(Animation.linear(duration: 3).repeatForever(autoreverses: false)) {
                                    angle = 360
                                }
                            }
                    } else {
                        Text("number \(i)")
                    }
                }
            }
            .offset(y: CGFloat(offset))
            .onAppear {
                offset = 200
            }
            
        }
    }
    

    【讨论】:

    • 预计您的下一个可能的问题,如果您的动画视图滚动到屏幕外然后又回来,它将不再是动画。请参阅 this answer 了解发生了什么以及如何解决。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-04-09
    • 2019-11-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多