在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))
- 当不设置参数的时候,视图入场大小从0放大到自身尺寸,出场时从自身尺寸缩小到0,然后移除。
- 当设置scale为指定的小于1的数值时,视图入场大小从该指定值倍数的自身尺寸放大到自身尺寸,出场时从自身尺寸缩小到指定值倍数的自身尺寸,然后移除。
- 当设置了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)
}
}
写在最后
本篇文章对一些基础的转场动画做了初步的讲解,希望能帮到大家。