如何解决SwiftUI:如何使用延迟为两个图像之间的过渡设置动画?
我有两个图像ImageA
和ImageB
,我的目标是以以下方式为它们之间的过渡设置动画:
-
ImageA
已加载 - 暂停1秒
-
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 举报,一经查实,本站将立刻删除。