微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

SwiftUI:如何使用延迟为两个图像之间的过渡设置动画?

如何解决SwiftUI:如何使用延迟为两个图像之间的过渡设置动画?

我有两个图像ImageAImageB,我的目标是以以下方式为它们之间的过渡设置动画:

  1. ImageA已加载
  2. 暂停1秒
  3. ImageA过渡到ImageB,持续时间为1.5秒

对于常规的Swift,它将使用UIView.animate闭包以及动画持续时间和暂停。

这是我对SwiftUI的尝试,它没有显示出平滑的过渡,而是显示了硬图像更改:

vstack(alignment: .leading,spacing: 0) {
            Image(images.randomElement()!)
                    .resizable()
                    .scaledToFill()
                    .onAppear {
                        dispatchQueue.main.asyncAfter(deadline: .Now() + 1.0) {
                        withAnimation() { //added
                            self.shouldTransition.toggle()
                        }
                    }
                    
            if shouldTransition {
                Image(images.randomElement()!)
                        .resizable()
                        .animation(.easeInOut(duration: 1.5))
                        .scaledToFill()
            }
            
        }

在实现图像过渡动画的实现中缺少什么?

编辑:可以在这里找到整个代码库:TestWidget Github

解决方法

您必须为观察到的变化添加withAnimation() { ... }包装器,并对其进行动画处理。

将代码更改为

DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
                                withAnimation(){
                                self.shouldTransition.toggle()
                                }
                            }
,

您没有指定所需的过渡方式,默认情况下,SwiftUI使用不透明度...

尝试以下

VStack(alignment: .leading,spacing: 0) {
    if !shouldTransition {
        Image(images.randomElement()!)
            .resizable()
            .scaledToFill()
            .onAppear {
                DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
                    self.shouldTransition.toggle()
                }
            }
            //.transition(.move(edge: .top))      // uncomment to modify transition
    }

    if shouldTransition {
        Image(images.randomElement()!)
            .resizable()
            .scaledToFill()
            //.transition(.move(edge: .top))      // uncomment to modify transition
    }
    
}.animation(.easeInOut(duration: 1.5),value: shouldTransition)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。