SwiftUI 中的 LoadingView 在 iOS 14 上表现异常
LoadingView in SwiftUI behaves weirdly on iOS 14
在从 Internet 获取数据之前,我正在为我的一个视图使用 LoadingView。它曾经在 iOS 13 上看起来不错,但现在在 iOS 14 上看起来很奇怪,如视频所示:
查看代码:
import SwiftUI
struct LoadingView: View {
@State private var shouldAnimate = false
var body: some View {
HStack {
Circle()
.fill(Color.primary)
.frame(width: 30, height: 30)
.scaleEffect(shouldAnimate ? 1.0 : 0.5)
.animation(Animation.easeInOut(duration: 0.5).repeatForever())
Circle()
.fill(Color.primary)
.frame(width: 30, height: 30)
.scaleEffect(shouldAnimate ? 1.0 : 0.5)
.animation(Animation.easeInOut(duration: 0.5).repeatForever().delay(0.3))
Circle()
.fill(Color.primary)
.frame(width: 30, height: 30)
.scaleEffect(shouldAnimate ? 1.0 : 0.5)
.animation(Animation.easeInOut(duration: 0.5).repeatForever().delay(0.6))
}
.onAppear {
self.shouldAnimate = true
}
}
}
知道如何解决这个问题吗?
在我旋转 phone 之前,动画对我来说还不错,然后我开始看到像你这样的动画,圆圈在疯狂移动。
为了解决这个问题,我改为显式调用动画(使用 withAnimation
),我重构代码使 PulsingCircle
成为自己的 View
类型:
struct PulsingCircle: View {
let delay: Double
let duration: Double
@State private var scale: CGFloat = 1.0
var body: some View {
Circle()
.fill(Color.primary)
.frame(width: 30, height: 30)
.scaleEffect(scale)
.onAppear {
withAnimation(Animation.easeInOut(duration: duration)
.repeatForever()
.delay(delay))
{
scale = 0.5
}
}
}
}
struct LoadingView: View {
var body: some View {
HStack {
PulsingCircle(delay: 0.0, duration: 0.5)
PulsingCircle(delay: 0.3, duration: 0.5)
PulsingCircle(delay: 0.6, duration: 0.5)
}
}
}
在从 Internet 获取数据之前,我正在为我的一个视图使用 LoadingView。它曾经在 iOS 13 上看起来不错,但现在在 iOS 14 上看起来很奇怪,如视频所示:
查看代码:
import SwiftUI
struct LoadingView: View {
@State private var shouldAnimate = false
var body: some View {
HStack {
Circle()
.fill(Color.primary)
.frame(width: 30, height: 30)
.scaleEffect(shouldAnimate ? 1.0 : 0.5)
.animation(Animation.easeInOut(duration: 0.5).repeatForever())
Circle()
.fill(Color.primary)
.frame(width: 30, height: 30)
.scaleEffect(shouldAnimate ? 1.0 : 0.5)
.animation(Animation.easeInOut(duration: 0.5).repeatForever().delay(0.3))
Circle()
.fill(Color.primary)
.frame(width: 30, height: 30)
.scaleEffect(shouldAnimate ? 1.0 : 0.5)
.animation(Animation.easeInOut(duration: 0.5).repeatForever().delay(0.6))
}
.onAppear {
self.shouldAnimate = true
}
}
}
知道如何解决这个问题吗?
在我旋转 phone 之前,动画对我来说还不错,然后我开始看到像你这样的动画,圆圈在疯狂移动。
为了解决这个问题,我改为显式调用动画(使用 withAnimation
),我重构代码使 PulsingCircle
成为自己的 View
类型:
struct PulsingCircle: View {
let delay: Double
let duration: Double
@State private var scale: CGFloat = 1.0
var body: some View {
Circle()
.fill(Color.primary)
.frame(width: 30, height: 30)
.scaleEffect(scale)
.onAppear {
withAnimation(Animation.easeInOut(duration: duration)
.repeatForever()
.delay(delay))
{
scale = 0.5
}
}
}
}
struct LoadingView: View {
var body: some View {
HStack {
PulsingCircle(delay: 0.0, duration: 0.5)
PulsingCircle(delay: 0.3, duration: 0.5)
PulsingCircle(delay: 0.6, duration: 0.5)
}
}
}