在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不在屏幕上,那么它就不能绘制矩形,即使仍然有一些模糊的东西需要动画处理.

我怎么才能从头到尾流畅地制作动画呢?

推荐答案

在矩形上使用compositingGroup可将其及其覆盖组合在一起,以便应用模糊,而不管覆盖是否被剪裁.

Rectangle()
    .fill(Color(CGColor(gray: 0, alpha: 0.15)))
    .overlay(
        Rectangle()
            .fill(Color(CGColor(gray: 0, alpha: 0.6)))
            ...
    )
    .compositingGroup()

Swift相关问答推荐

如何分解阿拉伯字母?

Xcode创建GitHub仓库,但未推送所有文件

如何在 switch case 模式语句中使用 Swift 文字正则表达式?

使用 RxSwift 围绕 async/await 方法创建 Observable

如何测试可选 struct 的协议一致性

动画偏移正在 destruct 按钮 SwiftUI

如何在 SWIFTUI 中旋转修剪?

UUID 哈希值是不确定的吗?

LeetCode 249. 分组移位字符串

SwiftUI 分段 Select 器的问题

如何更新 UserDefault 中的特定值

SwiftUI Grid 中的数组旋转

在 Swift 中将计时器标签格式化为小时:分钟:秒

try 在解除分配时加载视图控制器的视图... UIAlertController

将活动指示器 colored颜色 更改为黑色

在 Swiftui 中是否有一种简单的方法可以通过捏合来放大图像?

如何在 SwiftUI Segmented Picker 中更改选定的段 colored颜色

将 UIImage 剪成圆形

枚举大小写的原始值必须是文字

iPhone 纵向和 iPad 横向的通用应用程序