似乎不起作用的简单SwiftUI过渡

问题描述 投票:0回答:1

我一直在尝试全面了解SwiftUI中的动画和过渡如何工作。

我整天都在尝试不同的过渡和动画,但是我想要的一个过渡不起作用。我将首先显示代码,然后解释我想要哪种过渡。

struct Test: View {
    @State private var pressed = false // Controls whether the tower is shown or not.

    var body: some View {
        VStack {
            Button(pressed ? "Press me to hide tower" : "Press me to show tower") {  // Controls truth value of the "pressed" variable above.
                withAnimation(.easeInOut(duration: 5)) {  // I've set the duration to 5 because I want to see the animation in slow-motion.
                    self.pressed.toggle()  // Toggles truth value of "pressed" from true to false or vice-versa.
                }
            }

            if pressed {  // Displays the Tower when "pressed" is true.
                Tower()  // Tower struct is provided below.
            }
        }
    }
}

这是Tower结构:

struct Tower: View {
    var body: some View {
        VStack {
            Text("Level 3").transition(.move(edge: .leading))
            Text("Level 2")
            Text("Level 1").transition(.move(edge: .trailing))
        }
    }
}

我想要实现的过渡非常简单-我希望Level 3从左侧飞入,Level 1从右侧飞入,而Level 2只是淡入和淡出。但是,使用此代码,级别1、2和3都一起淡入和淡出。由于某些原因,.move(edge: .trailing)转换似乎不起作用。

陷阱是,我绝对希望Tower结构和Test结构始终分开。 (我不想复制粘贴Test结构内部的Tower结构中的任何代码)

[如果您可以向我展示如何使上下层从不同侧面飞进,请告诉我(如果您也可以提供代码示例,那么将大有帮助。)>

我一直在尝试全面了解SwiftUI中的动画和过渡效果。我整天都在尝试不同的转场和动画,但一个转场我...

xcode animation swiftui transition
1个回答
0
投票

过渡是在视图层次结构中/从视图层次结构[的引擎(如果指定了动画,则带有动画)。它直接应用于整个视图,而不是passed-into视图的子视图。因此,如果您尝试将视图添加到没有自己的过渡的视图层次结构中,则会立即显示它,如果有动画,则默认情况下会应用淡入/淡出过渡(同样,对视图[[整体) 。但是您希望从外部转换视图的内部。因此,这里是可能的解决方案。

使用Xcode 11.4 / iOS 13.4测试(您可以自己播放动画)

demo

struct Test: View { @State private var pressed = false var body: some View { VStack { Button(pressed ? "Press me to hide tower" : "Press me to show tower") { self.pressed.toggle() } Tower(show: $pressed) }.animation(.easeInOut) } } struct Tower: View { @Binding var show: Bool var body: some View { VStack { if show { Text("Level 3").transition(.move(edge: .leading)) Text("Level 2") Text("Level 1").transition(.move(edge: .trailing)) } } .animation(.easeInOut) } }

© www.soinside.com 2019 - 2024. All rights reserved.