开发者社区 问答 正文

SWIFUI-隐藏视图时的动画

当在视图中的一组身体中显示或隐藏视图时,我正在尝试使用SwiftUI来计算动画。我有这个代码:

var body: some View {

        Group {

            if isIntroShown {
                EAIntroViewContentView()
                .transition(AnyTransition.opacity.animation(.easeInOut(duration: 1.0)))
            }

            if mainhomeMode == .mylists {
                MyLists()
                    .onReceive(publisher) { (payload) in
                        self.toggleMainView()
                    }
            } else {
                CarsHome()
                    .onReceive(publisher) { (payload) in
                        self.toggleMainView()
                    }
            }

        }.onReceive(publisherIntro) { (payload) in
            self.onShowIntroButton()
        }
    }

当隐藏EAIntroView时,转换动画工作正常,但是块弹出向上移动到没有动画的窗口顶部。如何隐藏并显示Intro视图,使隐藏/显示事件平滑?

谢谢!

展开
收起
游客5akardh5cojhg 2019-12-05 16:36:27 571 分享 版权
阿里云 AI 助理回答

在SwiftUI中,为了使视图的显示和隐藏更加平滑并带有动画效果,你可以尝试使用ZStack来管理视图的堆叠,并利用opacity结合animation来控制视图的可见性。这样可以确保所有变换都包含在动画中,而不仅仅是透明度的变化。

下面是一个修改后的示例代码,展示了如何使用ZStackopacity来实现平滑的显示/隐藏过渡:

import SwiftUI

struct ContentView: View {
    @State private var isIntroShown = true
    // 假设你有这些状态和publisher
    @State private var mainhomeMode = HomeMode.mylists
    private let publisher: AnyPublisher<Void, Never>
    private let publisherIntro: AnyPublisher<Void, Never>

    var body: some View {
        ZStack {
            if isIntroShown {
                EAIntroViewContentView()
                    .opacity(isIntroShown ? 1 : 0) // 使用opacity控制显示与隐藏
                    .animation(.easeInOut(duration: 1.0), value: isIntroShown) // 动画效果
            }

            if mainhomeMode == .mylists {
                MyLists()
                    .onReceive(publisher) { _ in
                        self.toggleMainView()
                    }
            } else {
                CarsHome()
                    .onReceive(publisher) { _ in
                        self.toggleMainView()
                    }
            }
        }
        .onReceive(publisherIntro) { _ in
            self.onShowIntroButton()
        }
    }

    func toggleMainView() {
        // 实现切换mainhomeMode的逻辑
    }

    func onShowIntroButton() {
        // 实现根据publisherIntro切换isIntroShown的逻辑
    }
}

enum HomeMode {
    case mylists
    // 其他模式...
}

在这个例子中,我们用ZStack来同时放置EAIntroViewContentView和其他内容视图(MyListsCarsHome)。通过改变isIntroShown的状态,EAIntroViewContentViewopacity会在0到1之间变化,同时应用了.easeInOut动画,使得视图的出现和消失看起来更加平滑。

请根据你的实际项目情况调整上述代码中的逻辑和变量定义。

有帮助
无帮助
AI 助理回答生成答案可能存在不准确,仅供参考
0 条回答
写回答
取消 提交回答
问答地址: