如何在 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 中为选项卡栏项目(选择时)设置动画? 的相关文章

  • 如何设置文本字段字符限制 SwiftUI?

    我正在使用 SwiftUi 版本 2 进行应用程序开发 我遇到了 SwiftUI 中可用文本字段的问题 我不想再使用 UITextField 了 我想限制文本字段中的字符数 我搜索了很多 找到了一些与此相关的答案 但这些答案不适用于 Swi
  • 绑定到枚举的关联值

    是否有一个标准的方法来绑定 比如说 TextField到枚举的关联值 所以 鉴于此 enum Choice case one String case two String 我可以以某种方式将它用作视图中的绑定吗 State var choi
  • SwiftUI macOS 在文本字段处于活动状态时使用箭头键滚动列表

    我想使用 SwiftUITextField https developer apple com documentation swiftui textfield和一个 SwiftUIList https developer apple com
  • SwiftUI 是否可以调用该函数并从其他页面更改视图?

    这是我的代码 struct FirstPage View var body some View VStack NavigationView VStack Text First Page bold NavigationLink destina
  • 具有多个编辑按钮的 SwiftUI 表单

    试图有一个Form有多个部分 每个部分Section与它自己的EditButton 如何触发Section进入 编辑模式 而不触发中的所有部分Form 如所附 gif 所示 如何追踪EditButton在一定的Section被触发 以便Bu
  • SwiftUI Focus State API 环境变量不起作用

    当我们想要观察 SwiftUI 文本字段的焦点状态时 环境值 isFocused 似乎不起作用 除了将值传递给 TextFieldStyle 的 init 我们必须为每个 Textfield 执行此操作 之外 还有其他方法可以做到这一点吗
  • SwiftUI:如何在没有 AppDelegate 的情况下强制横向

    我正在制作带有视频播放器的应用程序 除了这个视频播放器之外 我的整个结构仅用于纵向视图 我想仅为该视图启用横向旋转 但我查过很多论坛 每个答案都是向 App Delegate 添加一些代码 但我没有 那我能做什么呢 这是给您的演示 您可以通
  • 如何在 SwiftUI 中对 Imagepicker 进行两次单独的调用?

    我希望用户能够将两个单独的图像上传到同一视图的两个不同部分 我能够让第一张图像在顶部正确显示 但每当用户添加第二个图像时 顶部的图像会再次更新 而不是底部的图像 截屏 https i stack imgur com IOi90 png 下面
  • 如何在 swiftui 中使用 .quickLookPreview 修饰符

    我正在尝试使用视图修饰符 quickLookPreview在 iOS 14 macOS 11 macCatalyst 14 中引入 但我收到此错误Value of type some View has no member quickLook
  • 在 SecureField 的 SwiftUI 中切换 isSecureTextEntry

    我想实现在 SecureField 中显示和隐藏密码的功能 以下是 SecureField 的代码 我添加了按钮 该按钮将被检测到显示和隐藏 SecureField 中的文本 但 swiftUI 没有类似的功能是安全文本条目除了切换之外还有
  • 水平滚动视图无法正常工作 swiftUI

    我试图显示一些水平视图 但它不起作用 下面是我正在使用的代码 State var userDataList UserModel var body some View VStack spacing 10 VStack prefView pad
  • SwiftUI 按钮在出现时更改文本大小

    从 GIF 中可以看出 一旦工作表完全打开 完成 按钮文本就会变大 这不仅发生在这个视图中 而且也发生在使用系统图像而不是文本的其他视图中 有谁知道问题的解决方案还是我做错了什么 我仍然对 Swift 记忆犹新 NavigationView
  • SceneDelegate 和 AppDelegate 之间的区别

    在我的 SwiftUI 项目中我看到AppDelegate文件以及SceneDelegate file 它们之间有什么区别 例如在方法之间SceneDelegate scene willConnectTo options 并在AppDele
  • SwiftUI - 将数据传递到不同的视图

    我正在开发一个有 4 个不同视图的应用程序 主视图 内容视图 an AddView an EditView 以及一个分离的DataView在一个类中 我通过一个传递所有数据可观察对象到其他意见 在主视图中我有一个项目列表 在里面AddVie
  • 我如何确定视图在 SwiftUI 中的最后一行代码之前完全渲染?

    我有一些代码 它们必须在视图完全渲染和绘制后被触发 因为我们知道视图的 onAppear 或 onChange 它们对于了解视图是否已出现或正在更改很有用 但它们是确保视图已 100 渲染没有用 例如 如果我们在视图中获得 ForEach
  • 返回列表 (SwiftUI) 后,选定的列表行背景保持灰色(选定)。 iOS 14 + Xcode 12

    从详细信息视图返回后 所选行保持灰色 在模拟器和真实设备上都会发生 仅在 iOS 14 上 有谁知道如何删除它 使其行为与 iOS 13 上相同 不保持选中状态 这是项目中唯一的代码 没有其他导航或任何东西 let items item1
  • 理解 UIViewRepresentable

    斯威夫特 5 0 iOS 13 尝试了解 UIViewRepresentable 的工作原理 并将这个简单的示例放在一起 几乎就这样了 但也许完全是无稽之谈 是的 我知道 SwiftUI 中已经有一个 tapGesture 这只是一个测试
  • 在 SwiftUI App 中实现深色模式切换

    我目前正在我的应用程序中研究深色模式 虽然由于我的 SwiftUI 基础 深色模式本身并不困难 但我正在努力选择将 ColorScheme 设置为独立于系统 ColorScheme 的选项 我在苹果人机界面指南中找到了这一点 https i
  • SwiftUI ScrollView 只向一个方向滚动

    尝试使用视图作为列表行样式来创建自定义列表 以摆脱默认情况下列表中难看的分隔线 但是 一旦我将 ZStack 行放入滚动视图中 滚动视图就会在两个方向上滚动 而不仅仅是垂直滚动 这是内容视图 NavigationView ScrollVie
  • SwiftUI 未知属性“可观察对象”

    所以我收到错误未知属性ObservableObject旁边的 ObservableObject var dataSource DataSource 下面打电话 这ObservableObject几天前在另一个项目中工作得很好 但现在不行了

随机推荐

  • 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