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

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

SwiftUI 自定义TabBar 点击切换跳动效果
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 下载

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

自定义TabBar 切换跳动效果Demo

赞助会员赞助会员¥免费
资源价格 ¥2.00 更新时间 2023-04-07
已付费?登录刷新

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

(0)
上一篇 2023-04-02 下午7:36
下一篇 2023-04-10

相关推荐

  • SwiftUI 自定义凸出 TabBar 底部菜单

    本篇示例为自定义 TabBar 菜单,在 TabBar 中间区域凸起一个定制菜单,原本的 TabBar 边框样式在该按钮底部凹成一个半圆弧状,效果如下图所示,本文底部附演示效果图和…

    2023-03-27
    5.6K

发表回复

登录后才能评论