在Swiftui中，当同一文本的前一个渐变结束时，文本的过渡缩放

Question

我有两个文本在一个SwiftUI视图和两个@State包装器。当视图出现时，第一个文本可见，第二个文本不可见。几秒钟后，第一个文本淡出，第二个文本应该同时淡出。到目前为止一切顺利。我的问题是……在第二个文本淡入后，几秒钟后，第二个名为Text("HELLO FROM THE OTHER SIDE")的文本必须缩小。这是我的问题。我应该如何改变代码，这样我就可以触发缩放过渡称为TextZoomOutTransition以及?下面是代码:

import SwiftUI
struct Transitions: View {

@State changeText: Bool
@State zoomText: Bool
private var TextFadeOut: AnyTransition {
.opacity
.animation(
.easeOut(duration: 0.3)
)
}

private var TextFadeIn: AnyTransition {
.opacity
.animation(
.easeIn(duration: 0.3)
)
}

private var TextZoomOutTransition: AnyTransition {
return .asymmetric(
insertion: .opacity,
removal: .scale(
scale: 1000, anchor: UnitPoint(x: 0.50, y: 0.45))
.animation(
.easeInOut(duration: 2.0)
.delay(0.1)
)
)
}

public var body: some View {

ZStack(alignment: .center) {
Color.clear


VStack(spacing: 24) {

if !changeText  {
Text("HELLO THERE")
.transition(TextFadeOut)
} else if !zoomText {
Text("HELLO FROM THE OTHER SIDE")
.transition(TextFadeIn)
}
}
}
.onAppear {
zoomText = false
DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
changeText = true
}
DispatchQueue.main.asyncAfter(deadline: .now() + 5.0) {
zoomText = true
}
}
}
}

Answer 1

缩小过渡已经在插入期间淡入，您只需要添加持续时间。同样的过渡在插入时淡入，在移除时缩小。

这是代码-我纠正了一些错误，如果你不介意(变量以小写字母开头，@State是变量…):

@State private var changeText = false
@State private var zoomText = false
private var textFadeOut: AnyTransition {
.opacity
.animation(
.easeOut(duration: 0.3)
)
}
private var textZoomOutTransition: AnyTransition {
return .asymmetric(
insertion: .opacity

// Here: add duration for fade in
.animation(
.easeIn(duration: 0.3)
),

removal: .scale(
scale: 1000, anchor: UnitPoint(x: 0.50, y: 0.45))
.animation(
.easeInOut(duration: 2.0)
.delay(0.1)
)
)
}
public var body: some View {

ZStack(alignment: .center) {
Color.clear


VStack(spacing: 24) {

if !changeText  {
Text("HELLO THERE")
.transition(textFadeOut)
} else if !zoomText {
Text("HELLO FROM THE OTHER SIDE")

// Use this transition for insertion and removal
.transition(textZoomOutTransition)
}
}
}
.onAppear {
zoomText = false
DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
changeText = true
}
DispatchQueue.main.asyncAfter(deadline: .now() + 5.0) {
zoomText = true
}
}
}