SwiftUI Transitions: Opacity, Slide, Move, Scale, Asymmetric

在SwiftUI中，我们可以在视图被插入或从层次结构中移除时添加效果。这就是所谓的过渡。
在接下来的部分中，我们将看到一些基本类型的转换。
在基于上一篇文章的基础动画上，我们再加上.transition()修饰器即可以实现视图的转场动画。

先特别强调一下：
使用.animation修饰器配合.transition()修饰器，是无法实现转场动画的，至少在现在的SwiftUI版本和Xcode版本是不行，更早的版本是能实现的。本篇文章采用Xcode 15.3测试。
而采用withAnimation()函数配合.transition()修饰器可以实现转场动画。

Opacity

我们可以设置不透明度参数来实现视图的淡入淡出，设置如下：

.transition(.opacity)

上面示例中，点击Tap按钮后，一个圆角黑色矩形不断的显现出来，再次点击慢慢消失。

Scale

和scaleEffect修饰器有点类似，Scale转换可以扩大和缩小视图大小:
根据参数不同，可以设置成下面三种。

.transition(.scale)
.transition(.scale(scale: 0.5))
.transition(.scale(scale: 0.5, anchor: .bottom))

1. 当不设置参数的时候，视图入场大小从0放大到自身尺寸，出场时从自身尺寸缩小到0，然后移除。
2. 当设置scale为指定的小于1的数值时，视图入场大小从该指定值倍数的自身尺寸放大到自身尺寸，出场时从自身尺寸缩小到指定值倍数的自身尺寸，然后移除。
3. 当设置了anchor时，放缩效果同第二种，只不过动画基于的位置有所变化，比如设置为bottom，则动画基于底边做动画， andhor的类型为UnitPoint。默认不设置该参数，动画过程都是基于视图中心位置做动画。
   
   
   

Slide

Slide转场动画比较简单，即是从左侧进入，从右侧移出。

.transition(.slide)

Move

使用slide转场动画只能从左进入，右侧出去，比较固定，不够灵活，而是用move动画可以设置其他的方向。

.transition(.move(edge: .top)) 		// 从上面进入，从上面移出。
.transition(.move(edge: .bottom))	// 从底部进入，从底部移出。
.transition(.move(edge: .leading))	// 从左侧进入，从左侧移出。
.transition(.move(edge: .trailing))	// 从右侧进入，从右侧移出。

edge参数只可以设置上下左右4个方向。

Asymmetric（不对称）

上面说的那些都是对称动画，也就是怎么来的，怎么回去，比如从底部进入，再从底部移出；变大进入，缩小移出。而Asymmetric，即不对称动画，可以指定怎么来的，也可以指定怎么没的。

.transition(.asymmetric(insertion: AnyTransition, removal: AnyTransition))

insertion: 进入动画
removal：移出动画
使用Asymmetric动画，我们可以把上面提到的都用进来，例如：

// 左侧滑动进来，放缩移出
.transition(.asymmetric(insertion: .slide, removal: .scale))
// 渐变进入，底部移出。
.transition(.asymmetric(insertion: .opacity, removal: .move(edge: .bottom)))
// 放大进入，渐变移出
.transition(.asymmetric(insertion: .scale, removal: .opacity))

组合转场动画

动画也是可以组合使用的，组合动画采用combined(with:)方法

.transition(.slide.combined(with: .scale))
.transition(.move(edge: .trailing).combined(with: .move(edge: .top)))

针对这种组合动画，也可以单独提出来，将其作为AnyTransition的扩展，在扩展里自定义想要的动画。

extension AnyTransition {
  static var slideAndScale: AnyTransition {
    return AnyTransition.slide.combined(with: .scale)
  }
}

写在最后

本篇文章对一些基础的转场动画做了初步的讲解，希望能帮到大家。