本文演示 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)
}
演示 Demo 下载
本文自 https://www.codeun.com 发布,相应代码均自主编写并严格审阅和测试,完整代码中包含丰富的学习笔记和使用方式、实用技巧。
· 如若转载,请注明出处:https://www.codeun.com/archives/1026.html ·