本文演示 TabBar 使用 withAnimation 和 rotationEffect 来制作动画,效果如下图
示例代码
Button {
withAnimation {
withAnimation(.easeInOut(duration: 0.3)) {
currentTab = item.title
}
}
DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
withAnimation(.easeInOut(duration: 0.2)) {
scaleValue = 0.75
}
withAnimation(.linear(duration: 0.2)) {
rotationDegrees += 10
}
}
DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
withAnimation(.easeInOut(duration: 0.2)) {
scaleValue = 1.25
}
withAnimation(.linear(duration: 0.2)) {
rotationDegrees -= 10
}
}
DispatchQueue.main.asyncAfter(deadline: .now() + 0.6) {
withAnimation(.easeInOut(duration: 0.3)) {
scaleValue = 1.0
}
}
} label: {
VStack(spacing: 6) {
Image(systemName: item.icon)
.font(.title2)
.scaleEffect(item.title == currentTab ? scaleValue : 1)
.rotationEffect(Angle(degrees: item.title == currentTab ? rotationDegrees : 0))
Text(item.title)
.font(.caption)
}
.foregroundColor(currentTab == item.title ? .orange : .gray)
.frame(maxWidth: .infinity)
}