在SwiftUI中,我有以下作为骨架加载器的视图.我正试着让模糊的覆盖从左边流畅地从左边进来,从右边出来.
Here's以下代码生成的内容(在灯光模式下).正如您所看到的,动画的开头和结尾并不是平滑地为覆盖设置动画,而是在没有动画的情况下插入它,然后在大多数情况下为它设置动画,然后在没有动画的情况下删除它.
struct SkeletonLoader: View {
@State private var isAnimating: Bool = false
let radius: CGFloat = 50
var body: some View {
GeometryReader { geo in
Rectangle()
.fill(Color(CGColor(gray: 0, alpha: 0.15)))
.overlay(
Rectangle()
.fill(Color(CGColor(gray: 0, alpha: 0.6)))
.frame(width: geo.size.width, height: 1000)
.blur(radius: radius)
.position(x: isAnimating ? geo.size.width + 180 + radius : -200 - radius)
)
.onAppear {
withAnimation(.easeIn(duration: 6.5).repeatForever(autoreverses: false)) {
isAnimating.toggle()
}
}
}
.clipped()
}
}
出于某种原因,删除.clipped
修复了平滑动画的问题,但我需要剪辑我的视图,使模糊不超过我的视图.
我怀疑这是因为如果SwiftUI的position
不在屏幕上,那么它就不能绘制矩形,即使仍然有一些模糊的东西需要动画处理.
我怎么才能从头到尾流畅地制作动画呢?