SwiftUI动画进阶，仿购票平台App行程目的地互换动效

携手创造，一起成长！这是我参与「日新方案 8 月更文挑战」的第25天，点击查看活动详情。

项目背景

近几个月经常在国内出差，平常都是HR帮助订好的机票和酒店，某天在翻开某团搜索行程的时候发现地址切换动画蛮有意思。

当咱们需求方便切换出发地和目的地时，只需求点击中间的切换按钮，然后就会有一个出发地和目的地“文字对调”的动画，这很人性化，也很高雅。

本章中，咱们就来运用MatchedGeometryEffect构建这样的过渡动画。

那么，让咱们开端吧。

项目建立

首先，创建一个新的SwiftUI项目，命名为SwiftUIMGE。

根底款式

先来看看根底款式部分，根底的结构咱们能够看到有3个元素：起始地、切换图标、目的地。

三个元素横向排布，咱们先来完成下根底的款式，示例：

HStack {
Spacer()
Text("广州")
.font(.title)
.fontWeight(.bold)
.foregroundColor(.black)
Spacer()
Image(systemName: "paperplane.circle")
.foregroundColor(.red)
.font(.title)
Spacer()
Text("北京")
.font(.title)
.fontWeight(.bold)
.foregroundColor(.black)
Spacer()
}
.frame(maxWidth: .infinity)
.padding()

上述代码中，咱们运用HStack横向布局视图，运用Spacer将3个元素均衡散布。

根底动画

当咱们点击中间的按钮时，需求对调出发地和目的地的方位，咱们先声明一个变量表示当时的状况，示例：

@State var isSwitch: Bool = true

当isSwitch处于不同状况时，咱们展示不同的视图，一起在点击Image图标时，切换isSwitch的状况。

if isSwitch {
HStack {
Spacer()
Text("广州")
.font(.title)
.fontWeight(.bold)
.foregroundColor(.black)
Spacer()
Image(systemName: "paperplane.circle")
.foregroundColor(.red)
.font(.title)
.onTapGesture {
withAnimation(.linear) {
self.isSwitch.toggle()
}
}
Spacer()
Text("北京")
.font(.title)
.fontWeight(.bold)
.foregroundColor(.black)
Spacer()
}
.frame(maxWidth: .infinity)
.padding()
} else {
HStack {
Spacer()
Text("北京")
.font(.title)
.fontWeight(.bold)
.foregroundColor(.black)
Spacer()
Image(systemName: "paperplane.circle")
.foregroundColor(.red)
.font(.title)
.onTapGesture {
withAnimation(.linear) {
self.isSwitch.toggle()
}
}
Spacer()
Text("广州")
.font(.title)
.fontWeight(.bold)
.foregroundColor(.black)
Spacer()
}
.frame(maxWidth: .infinity)
.padding()
}

过渡动画

上述代码中，咱们依据isSwitch的状况切换两个视图，实现了根底的动画作用，但这不行高雅。

咱们看到客户端的过渡动画是两个文字有一个高雅的“互调过渡”，咱们先声明一个变量来存储交流方位的状况，示例：

@Namespace private var Transition

然后运用matchedGeometryEffect修饰符进行方位变换，示例：

//广州的id为guangzhou
Text("广州")
 .matchedGeometryEffect(id: "guangzhou", in: Transition)
//北京的id为beijing
Text("北京")
  .matchedGeometryEffect(id: "beijing", in: Transition)

咱们给4个Text都加上matchedGeometryEffect修饰符，这儿要区分ID，过渡动画才干知道那两个视图的元素进行交流。

这儿假如咱们要看到终究的作用，咱们需求运转模拟器，在真机环境下才干看到终究的交互作用。

项目预览

祝贺你，完成了本章的全部内容！

快来动手试试吧。

假如本专栏对你有帮助，无妨点赞、谈论、关注～