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

Posted 2023-02-24

【中文标题】SwiftUI 如何使圆形动画双向工作

【英文标题】：SwiftUI How to make circular animation work in both direction

【发布时间】：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。 如果我只应用删除，那么它可以隐藏到中心。 但是其他方式无法正常工作。有相当不透明的过渡。

【参考方案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()