SwiftUI 如何使圆形动画双向工作答案

【问题标题】：SwiftUI How to make circular animation work in both directionSwiftUI 如何使圆形动画双向工作
【发布时间】：2020-03-08 16:25:50
【问题描述】：

我有这样的自定义圆形动画，我想让它从屏幕中心显示，然后将其隐藏到屏幕中心。现在它以一种或另一种方式工作，但不是两者兼而有之。

return AnyTransition.asymmetric(
            insertion: AnyTransition.modifier(
                active: ClipShapeModifier(shape: ScalableCircle(percent: 0).offset(offset)),
                identity: ClipShapeModifier(shape: ScalableCircle(percent: 1).offset(offset))
            ),
            removal: AnyTransition.modifier(
                active: ClipShapeModifier(shape: ScalableCircle(percent: 1).offset(offset)),
                identity: ClipShapeModifier(shape: ScalableCircle(percent: 0).offset(offset))
            )
        )

我在这里显示/隐藏视图

if showOnboarding {
            OnboardingView()
     .transition(.circularReveal())
 } else {
                    ContentView()
  }

如果我只应用插入，那么它可以正常显示 FROM center。如果我只应用删除，那么它可以隐藏到中心。但是其他方式无法正常工作。有相当不透明的过渡。

【问题讨论】：

标签： animation swiftui transition

【解决方案1】：

我找到了解决办法

需要定期过渡到不对称，因为这是相同的（仅还原）过渡。所以

 return AnyTransition.modifier(
            active: ClipShapeModifier(shape: ScalableCircle(percent: 0).offset(offset)),
            identity: ClipShapeModifier(shape: ScalableCircle(percent: 1).offset(offset))
        )

将 .zIndex(1) 应用于转换视图原因很重要，同时隐藏它会在不透明度变化的新出现视图下方

ZStack {

        if showOnboarding {
            OnboardingView()

                .transition(.circularReveal())
                .zIndex(1)
        } else {
            ContentView()
        }

    }

【讨论】：