如何在 SwiftUI 中为选项卡栏项目(选择时)设置动画?

2023-12-31

我怎样才能动画标签栏项目(TabView)关于 SwiftUI 中的选择?

例如给所选项目一个.scaleEffect() with .spring()动画片 或如下所示:

这是我到目前为止所尝试过的:

struct MyTabbedView: View {
    @State var enlargeIt1 = false
    @State var enlargeIt2 = true

    var body: some View {
        TabView {
            Text("Item 1")
                .onAppear {
                    self.enlargeIt1.toggle()
                    self.enlargeIt2.toggle()
                }
                .tabItem{
                    VStack{
                        Image(systemName: "music.note")
                            .font(self.enlargeIt1 ? .system(size: 30) : .system(size: 15) )
                            .animation(.interpolatingSpring(mass: 0.7, stiffness: 200, damping: 10, initialVelocity: 4))
                        Text("Music")
                    }
                }.tag(1)

            Text("Item 2")
                .onAppear {
                    self.enlargeIt1.toggle()
                    self.enlargeIt2.toggle()
                }
                .tabItem{
                    VStack{
                        Image(systemName: "music.mic")
                            .font(self.enlargeIt2 ? .system(size: 30) : .system(size: 15) )
                            .animation(.interpolatingSpring(mass: 0.7, stiffness: 200, damping: 10, initialVelocity: 4))
                        Text("Mic")
                    }
                }.tag(2)

        }
    }
}

结果是这样的:

我在一个名为的单独视图中尝试了大约相同的代码TestView :

struct TestView: View {
    @State var enlargeIt1 : Bool = false

    var body: some View {
        VStack{
            Image(systemName: "music.note")
                .font(self.enlargeIt1 ? .system(size: 30) : .system(size: 15) )
                .animation(.interpolatingSpring(mass: 0.7, stiffness: 200, damping: 10, initialVelocity: 4))
            Text("Music")
        }
        .onTapGesture {
            self.enlargeIt1.toggle()
        }

    }
}

这是结果:

有什么问题吗TabView我已经创建了它没有给出相同的结果?


这是标准的可能方法TabView(对于提供的代码快照)。

这个想法是在使用的 SF 图像上使用可动画修改器来调整字体大小。

使用 Xcode 11.4 / iOS 13.4 进行测试

// Animating font size
struct AnimatableSFImage: AnimatableModifier {
    var size: CGFloat

    var animatableData: CGFloat {
        get { size }
        set { size = newValue }
    }

    func body(content: Self.Content) -> some View {
        content
            .font(.system(size: size))
    }
}

// helper extension
extension Image {
    func animatingSF(size: CGFloat) -> some View {
        self.modifier(AnimatableSFImage(size: size))
    }
}

// Modified test code snapshot
struct TestAnimatedTabBar: View {
    @State var enlargeIt1 = false
    @State var enlargeIt2 = true

    var body: some View {
        TabView {
            Text("Item 1")
                .onAppear {
                    self.enlargeIt1.toggle()
                    self.enlargeIt2.toggle()
                }
                .tabItem{
                    VStack{
                        Image(systemName: "music.note")
                            .animatingSF(size: self.enlargeIt1 ? 30 : 15 )
                        Text("Music")
                    }.animation(.interpolatingSpring(mass: 0.7, 
             stiffness: 200, damping: 10, initialVelocity: 4))
                }.tag(1)

            Text("Item 2")
                .onAppear {
                    self.enlargeIt1.toggle()
                    self.enlargeIt2.toggle()
                }
                .tabItem{
                    VStack{
                        Image(systemName: "music.mic")
                            .animatingSF(size: self.enlargeIt2 ? 30 : 15 )
                        Text("Mic")
                    }.animation(.interpolatingSpring(mass: 0.7, 
             stiffness: 200, damping: 10, initialVelocity: 4))
                }.tag(2)

        }
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 SwiftUI 中为选项卡栏项目(选择时)设置动画? 的相关文章

  • 如何将 WKUIDelegate 实现到 SwiftUI WKWebView 中?

    我正在 Xcode v11 上创建一个 Web 应用程序 但在实现 WKUIDelegate 来显示 Javascript 警报并在 Web 应用程序上正确确认时遇到问题 我在 ContentView swift 上得到了一个非常简单的 w
  • 在 WidgetKit 中每分钟更新时间文本标签

    是否可以在小部件中创建显示当前时间并实时更新的文本标签 尝试创建时钟小部件 但小部件每 5 分钟仅更新 1 次 创建时间表没有帮助 使小部件保持最新 不适用于当前时间 仅适用于计时器等 一个可能的解决方案是使用time日期样式 A styl
  • 如何在 SwiftUI 中将变量从一个视图传递到另一个视图

    我正在尝试将一个变量从一个视图传递到 SwiftUI 中的另一个视图 我有一个重置按钮 我想在另一个视图中将变量设置为零 我尝试在视图一中创建一个新结构并在视图2中访问该变量 View 1 State var count MyNumber
  • 如何在 SwiftUI 中使用 @FetchRequest 和新的可搜索修饰符?

    是否可以使用新的 searchable结合 FetchRequest 我有这样的代码 struct FooListView View Environment managedObjectContext private var viewCont
  • 通过 ObservableObject 向下传递 GestureState 属性

    我有一个ObservableObject其成员属性为 GestureState包装纸 在我看来 我如何访问GestureState财产 我已经尝试过使用点表示法 绑定尝试公开 GestureState 但它不喜欢那样 我的应用程序状态Obs
  • 在 SwiftUI 中使用获取视图的宽度

    我需要获取渲染视图的宽度SwiftUI 这显然没那么容易 我的看法是 我需要一个返回视图尺寸的函数 就这么简单 var body some View VStack alignment leading Text timer name font
  • 上下文菜单未在 SwiftUI 中更新

    我正在尝试设置 SwiftUI contextMenu带有一个切换按钮Bool价值 上下文菜单的按钮文本应该在以下情况下更改 Bool切换 但上下文菜单不会更新 有没有办法强制更新上下文菜单 描述问题的示例代码 import SwiftUI
  • 如何使用 iOS16 删除 SwiftUI Plain List 中的节标题顶部填充

    当我们使用 SwiftUI List 组件并需要一个节标题时 顶部填充将出现在每个节的标题上 iOS15下 我们使用UITableView appearance sectionHeaderTopPadding 0来解决这个问题 查看附件截屏
  • 如何使用 SwiftUI 拖动工作滑块

    我想拖动一个滑块 当然也让它滑动 我可以做其中之一 但我不能两者都做 如何拖动并拥有可用的滑块 我也尝试找到一种方法来删除手势 但我找不到方法来做到这一点 还尝试了 Apple Composition SwiftUI Gestures 文档
  • SwiftUI NavigationView 看不到图像

    我有一个代码并制作 NavigationLink 按钮 我编写文本和图像 但我的图像看不到 请帮助我 VStack Image Coachs resizable aspectRatio contentMode fill frame widt
  • SwiftUI - 取决于多个条件

    SwiftUI 中是否可以依赖多个条件 例如显示一个工作表 sheet isPresented stateA stateB content this is not working 或者已知有不同的方法 我只能带你去看门 c 墨菲斯 今天是运
  • SwiftUI Nested ForEach 导致致命错误:每个布局项只能出现一次

    我正在尝试创建一个 LazyVGrid 视图来使用嵌套的 ForEach 语句显示数组中对象的内容 该代码导致应用程序崩溃 并显示消息 致命错误 每个布局项只能出现一次 每个对象都包含一个值数组 需要在网格中显示为一行 该行由包含对象 sk
  • 如何使 SwiftUI 列表行背景颜色扩展整个宽度,包括安全区域之外

    在 SwiftUI 中List 如何制作列表行背景 通过设置 listRowBackground 扩展视图的整个宽度 甚至在安全区域下方 例如 在宽屏 iPhone 例如 iPhone 12 Pro Max 上横向运行时 目前 该单元格在安
  • ScrollView 内的 GeometryReader 会折叠 GeometryReader,无论子尺寸如何

    我正在尝试创建一个包含绘图的子视图 我希望该绘图的大小与父容器的一部分成比例 除非将其放入层次结构上方的滚动视图中 否则效果很好 从屏幕截图中可以看出 堆栈内部的声音正如预期的那样最大 但是 当您放入滚动视图时 几何读取器的大小会折叠到接近
  • SwiftUI 图像 ClipsToBounds

    尝试使用 SwiftUI Xcode 11 0 beta 2 我尝试用图像填充视图 Image large resizable aspectRatio contentMode fill frame width 80 height 80 al
  • 得到“致命错误:索引超出范围”:在 swiftui 的列表项中显示索引

    更新 错误 类型 没有成员 1 如果在list foreach中放置一个if闭包 if self showMarkedOnly name marked 为什么 代码版本4 struct Name Identifiable Hashable
  • 如何在 SwiftUI 中动态隐藏导航后退按钮

    我需要暂时地在异步操作期间隐藏视图中的后退按钮 我想防止用户在操作完成之前离开视图 隐藏它是可能的永久使用 navigationBarBackButtonHidden true 但是 显然用户在这种情况下无法返回 因此他们被卡住了 我缺少什
  • SwiftUI - 如何调整 PickerView 的大小?

    如何在 SwiftUI 中调整选择器视图的大小 我需要更改它占用的宽度 我下面的代码只是一个简单的视图 里面有一个选择器 更改宽度参数不会更改选取器视图的宽度 struct CalibrationBar View State var ton
  • SwiftUI 动画滑入和滑出

    我有一个视图将显示在另一个视图上 视图动画完美地从右侧滑入 但是当我单击 关闭 按钮时 视图消失 而没有在消失之前滑回右侧的所需动画 我尝试过使用 opacity self isShowing 1 0 但随后视图淡入和淡出 我需要它滑入和滑
  • 如何在 SwiftUI 中仅使用 ForEach 而不是列表来滑动删除

    我正在 SwiftUI 中使用 ForEach 制作自定义列表 我的目标是进行滑动删除手势 而不是将 ForEach 嵌入到列表中 到目前为止 这是我的代码 import SwiftUI struct ContentView View le

随机推荐

  • R - 箱线图中的排序

    我正在尝试制作一系列箱形图R由 2 个因素分组 我已经成功地绘制了图 但我无法将盒子按正确的方向排序 我正在使用的数据场如下所示 Nitrogen Species Treatment 2 G L 3 R M 4 G H 4 B L 2 B
  • 更改/设置 gcloud 操作系统登录用户名?

    这么简单的问题 我正在向我的计算引擎添加一个新帐户 我添加了用户和角色以及所有有趣的东西 现在我想添加 ssh 密钥 我通过运行来执行此操作gcloud compute os login ssh keys add key file 这工作正
  • 如何让 Jest 静默测试抛出的错误

    我正在编写一个测试来断言如果提供了一个 prop 而没有提供另一个 prop 则组件会抛出错误 测试本身通过了 但控制台仍然抱怨未捕获的错误并打印整个堆栈跟踪 有没有办法让 Jest 停止打印此信息 因为它会污染测试运行程序并使其看起来像是
  • 如何使 Maven Javadoc 插件适用于任何 Java 版本

    我正在使用 Maven Javadoc 插件 如下所示
  • Java 中的无效字符常量?

    这是我的代码 import java util Scanner import javax swing JOptionPane import java text DecimalFormat Medium Speed Air 1100 feet
  • 使用 TypeScript 将 JSON(来自 Sentry)转换为 HTML

    我想学习 TypeScript 我有一个由哨兵方法返回的 JSON 字典event from exception Python 我想将其格式化为带有可扩展局部变量以及前后上下文的漂亮 HTML 结果应该大致如下所示 下面是一个 json 示
  • rbind 数据框,重复的行名问题

    虽然在一个文件中允许重复的行 和列 名称matrix 他们不允许在data frame 尝试去rbind 一些具有共同行名称的数据框突出了这个问题 考虑下面的两个数据框 foo data frame a 1 3 b 5 7 rownames
  • 从 C 访问网络数据包中未对齐数据的安全、有效的方法

    我正在用 C 为 ARM9 处理器上的 Linux 编写一个程序 该程序用于访问网络数据包 其中包括一系列标记数据 例如
  • PowerShell 中的子字符串截断字符串长度

    是否可以在 PowerShell 中截断字符串 使用SubString 达到给定的最大字符数 even如果原始字符串已经存在shorter 例如 foreach str in hello good morning hi str subStr
  • 获取 ASP.NET MVC5 WebAPI 令牌有时会失败

    获取 ASP NET MVC5 WebAPI 令牌有时会失败 Code string GetAPITokenSync string username string password string apiBaseUri var token s
  • Pyspark ML - 如何保存管道和 RandomForestClassificationModel

    我无法保存使用 python spark 的 ml 包生成的随机森林模型 gt gt gt rf RandomForestClassifier labelCol label featuresCol features gt gt gt pip
  • 如何计算 docker 限制

    我创建了我的码头工人 Python Flask 如何计算内存和 CPU 的限制 我们是否有一些工具可以在具有不同限制的 docker 上运行性能测试 然后建议设置的最佳限制数字是多少 对于已经在容器内运行的应用程序 您可以使用docker
  • 呈现一个新的视图控制器保留选项卡栏

    我目前正在开发一个支持iOS6 的iPhone应用程序 应用程序的结构有一个 UITabBarController 作为根控制器 并分配了许多视图控制器 其中一个选项卡上有一个带有项目列表的 UITableViewController 当选
  • “数组”类型的属性在领域对象服务器中具有未知的对象类型

    我正在尝试使用Realm mobile platform我从领域对象服务器调用外部 Web 服务并创建不同实体的对象 创建架构后 当我将数据转储到其中时 我收到以下错误 Schema validation failed due to the
  • 对于 .NET 开发人员来说,Python 还是 Ruby? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我是一名 C NET 开发人员 主要从事 ASP NET 项目 我想学习一门新的编程语言 通过体验新语言来提高我的编程技能 看看与微软环境不同的
  • 如何将 AdView 放在 ConstraintLayout 底部和其他内容下方?

    我正在尝试从relativelayout迁移到constraintlayout 但在将admobadview添加到底部及其上方的其余内容时遇到问题 例如 使用RelativeLayout 就是这么简单 你只需要把android layout
  • 在 jquery 模板中定义新变量

    是否可以在 jquery 模板中定义新变量 我阅读了官方的 jquery 模板文档 但找不到任何相关内容 我尝试过类似的东西 var xxx 123 但它不起作用 最后我通过做黑客 item xxx 123 然后使用 item xxx 但我
  • Solr 精确单词结果优先

    在 Solr 5 0 0 中 我有一个product name场地 当我搜索一个或多个单词时 它会给出包含该单词的产品名称的结果 我怎样才能做到这一点 因为精确匹配是第一位的 My 架构 xml在下面
  • Java:构造函数中的 NULL

    我有这个问题 有点理论化 但我想理解它 为什么如果我将 null 参数传递给构造函数 我会得到一个NullPointerException 这是我的例子 new AttendeeDetail Gus Goose 1151 15 01 201
  • 如何在 SwiftUI 中为选项卡栏项目(选择时)设置动画?

    我怎样才能动画标签栏项目 TabView 关于 SwiftUI 中的选择 例如给所选项目一个 scaleEffect with spring 动画片 或如下所示 这是我到目前为止所尝试过的 struct MyTabbedView View