SwiftUI：使用ViewModifier生成自定义动画

为SwiftUI创建全新的过渡动画是有可能而且实际上是非常容易的，允许我们使用完全自定义的动画添加和删除视图。

.transition 修饰符内使用.modifier使此功能成为可能，该过渡.transition接受我们想要的任何视图修饰符。要注意的是，我们需要能够实例化修饰符，这意味着它必须是我们自己创建的修饰符。

要尝试此操作，我们可以编写一个视图修饰符，让我们模仿Keynote中的Pivot动画——它使新幻灯片从其左上角开始旋转。在SwiftUI中，这意味着创建一个视图修饰符，使我们的视图从一个角旋转，同时不会超过视图的边界。SwiftUI实际上为我们提供了修饰符，以做到这一点：rotationEffect（）使我们可以旋转视图在2D空间中，clipped（）阻止将视图绘制到其矩形空间之外。

rotationEffect（）与rotation3DEffect（）类似，不同之处在于它始终绕Z轴旋转。但是，它也使我们能够控制旋转的锚点——视图的哪一部分应固定在旋转中心。SwiftUI为我们提供了一个用于控制锚点的UnitPoint类型，该类型使我们可以为旋转指定确切的X / Y点，或使用许多内置选项之一:.topLeading，.bottomTrailing，.center等。

让我们通过创建CornerRotateModifier结构体将所有这些内容放入代码中，该结构体具有一个锚点来控制旋转的位置，并控制要应用多少旋转角度：

struct CornerRotateModifier: ViewModifier {
    let amount: Double
    let anchor: UnitPoint

    func body(content: Content) -> some View {
        content.rotationEffect(.degrees(amount), anchor: anchor).clipped()
    }
}

在此处添加clipped（）意味着，当视图旋转时，位于其自然矩形之外的部分不会被绘制。

我们可以使用·.modifier直接尝试该操作，但这有点笨拙。一个更好的主意是将其包装到AnyTransition`的扩展中，使其在其最前面的角从-90旋转为0：

extension AnyTransition {
    static var pivot: AnyTransition {
        .modifier(
            active: CornerRotateModifier(amount: -90, anchor: .topLeading),
            identity: CornerRotateModifier(amount: 0, anchor: .topLeading)
        )
    }
}

有了这个，我们现在可以使用以下方法将 pivot 动画附加到任何视图：

.transition(.pivot)

译自 Building custom transitions using ViewModifier

Previous: 视图的显示和隐藏动画	Hacking with iOS: SwiftUI Edition	Next: Animation 项目——挑战

赏我一个赞吧~~~