如何在SwiftUI中组合旋转和淡出动画

我的屏幕显示一个旋转指示器，直到要显示的数据下载完毕

我能够正确执行指示器旋转动画

struct MainView:View{
@ObservedObject var viewModel=MainViewModel（）
var body：一些观点{
VStack（间距：0）{
如果let data=viewModel.fetchedData{
文本（数据.说明）
}否则{
垫片（）
}
阿德班纳（）
}
.overlay（指示器（显示：$viewModel.isLoading））
}
}
结构指示器：视图{
@绑定变量：Bool
@国家私有var=错误
@视图生成器
var body：一些观点{
如果显示{
图像（“环”）
.旋转效果（.度（旋转？360:0））
奥纳佩尔先生{
withAnimation（.linear（持续时间：1）。repeatForever（自动反转：false）{
自旋转=真
}
}
}
}
}

数据下载完成后，我希望此指示器随着其旋转的继续而淡出。我尝试了许多方法，但无法正确执行此操作。例如，它可能没有动画，或者可能淡出，但旋转可能中断

• 不设置动画：

之前：

.overlay（指示器（显示：$viewModel.isLoading））

之后：

.overlay（显示的指示器：$viewModel.isLoading.animation（.easeOut（持续时间：1）））

• 旋转中断（淡入淡出开始时，角度重置为0）：

之前：

如果显示{
图像（“环”）
.旋转效果（.度（旋转？360:0））
奥纳佩尔先生{
动画片{
自旋转=真
}
}
}

之后：

ZStack{
如果显示{
图像（“环”）
.旋转效应（旋转？360:0）
奥纳佩尔先生{
动画片{
自旋转=真
}
}
}
}
.transition（.不透明）
.animation（.easeOut（持续时间：1））

---

是否可以在不中断旋转动画的情况下淡出旋转动画？

您需要转换，因为视图（在本例中为图像）已从视图层次结构中移除。而转换是通过移除视图的容器来设置动画的

注意：最好将每个动画链接到自己的切换状态，以避免影响其他动画

以下是解决方案。使用Xcode 12.1/iOS 14.1进行测试

struct Indicator: View {
    
    @Binding var shown: Bool
    @State private var rotating = false
    
    @ViewBuilder
    var body: some View {
        VStack {
            if shown {
                Image("Ring")
                    .rotationEffect(Angle(degrees: rotating ? 360 : 0))
                    .animation(Animation.linear(duration: 1).repeatForever(autoreverses: false), value: rotating)
                    .transition(.opacity)
                    .onAppear {
                        self.rotating = true
                    }
            }
        }.animation(.default, value: shown)
    }
}

---

我创建了一个新的应用程序，在根屏幕上试用，它工作正常！非常感谢。