使用 ZStack 将动画视图与另一个视图组合

Question

我正在开发一个 WatchOS 应用程序，它需要在等待任务完成时在另一个视图之上显示动画。

我的方法如下（ConnectionView）：

struct ConnectionView: View{
    @EnvironmentObject var isConnected : Bool

    var body: some View {
       return VStack(alignment: .trailing){
          ZStack{
             ScrollView{
               .....
             } 

             if(!isConnected){
                 ConnectionLoadingView()
             }

          }
       }
    }
}

对于 ConnectionLoadingView：

struct ConnectionLoadView: View {
    @State var isSpinning = false
    @EnvironmentObject var isConnected : Bool

    var body: some View {

    var animation : Animation

    ///This is needed in order to make the animation stop when isConnected is true
    if(!isConnected){
        animation = Animation.linear(duration: 4.0)
    }else{
        animation = Animation.linear(duration: 0)
    }

    return Image(systemName: "arrowtriangle.left.fill")
        .resizable()
        .frame(width: 100, height: 100)
        .rotationEffect(.degrees(isSpinning ? 360 : 0))
        .animation(animation)
        .foregroundColor(.green)
        .onAppear(){
            self.isSpinning = true
        }
        .onDisappear(){
            self.isSpinning = false
        }
    }
}

真正的问题由两部分组成：

在应用程序启动后显示的第一个ConnectionView 上，ConnectionLoadView 正常显示。在随后的运行中，ConnectionLoadView 有一个奇怪的 "fade in" 效果，它改变了整个动画的不透明度（无论我将视图的不透明度设置为 1、0 还是介于两者之间的任何值都没有关系）。

如果我在 ConnectionLoadView 中没有以下代码片段：

if(!isConnected){
    animation = Animation.linear(duration: 4.0)
}else{
    animation = Animation.linear(duration: 0)
}

如果没有这个，ConnectionView 将继续播放动画，但将它从 ZStack 的前景移动到背景，在 ScrollView 后面，什么时候它应该立即消失？如果没有此代码片段，动画只会在任务完成前停止时消失。

当我明确声明仅当且仅当 !isConnected 在 ConnectionView 中才应显示时，ConnectionLoadView 被推送到 ZStack 的背景而不是完全从视图中删除是否有任何原因？

我也不太明白为什么初始 ConnectionView 的动画行为与随后的不透明度行为之间存在差异。不透明度变化是线性动画的一部分吗？

谢谢！

Answer 1

您接近动画的方式有误。你不应该为此使用隐式动画。明确的动画更适合。

隐式动画是您使用 .animation() 应用的动画。这会影响在视图上更改的任何可动画参数。

显式动画是您使用 withAnimation { ... } 触发的动画。只有受闭包内修改的变量影响的参数才会有动画。其他的不会。

新代码如下所示：

import SwiftUI

class Model: ObservableObject {
    @Published var isConnected = false
}

struct Progress: View{
    @EnvironmentObject var model: Model

    var body: some View {
       return VStack(alignment: .trailing){
          ZStack{
             ScrollView{
                ForEach(0..<3) { idx in
                    Text("Some line of text in row # \(idx)")
                }

                Button("connect") {
                    self.model.isConnected = true
                }
                 Button("disconect") {
                     self.model.isConnected = false
                 }
             }

            if !self.model.isConnected {
                 ConnectionLoadView()
             }

          }
       }
    }
}

struct ConnectionLoadView: View {
    @State var isSpinning = false
    @EnvironmentObject var model: Model

    var body: some View {

    return Image(systemName: "arrowtriangle.left.fill")
        .resizable()
        .frame(width: 100, height: 100)
        .rotationEffect(.degrees(isSpinning ? 360 : 0))
        .foregroundColor(.green)
        .onAppear(){
            withAnimation(Animation.linear(duration: 4.0).repeatForever(autoreverses: false)) {
                self.isSpinning = true
            }
        }
    }
}

使用 ZStack 将动画视图与另一个视图组合

Combining an animated view with another view using ZStack

animation

ios

watchos

swiftui