站点图标 Codeun

SwiftUI 自定义TabBar 点击切换跳动效果

SwiftUI 自定义TabBar 点击切换跳动效果

本文演示 TabBar 使用 withAnimation 和 rotationEffect 来制作动画,效果如下图

SwiftUI TabBar 切换扭动效果

示例代码

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 下载

退出移动版