如何在 SwiftUI 中禁用位置动画?
How to disable position animation in SwiftUI?
我想以编程方式滚动 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()
}
}
以及效果,
尝试以下操作(在 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
}
}
}
我想以编程方式滚动 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()
}
}
以及效果,
尝试以下操作(在 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
}
}
}