让 SwiftUI 原生 TabView 支持标签页切换转场动画

已于 2024-07-02 18:21:24 修改
阅读量195 收藏 13
点赞数 17
分类专栏： 开发疑难秒懂百科 文章标签： swiftui TabView 标签页 切换动画 转场动画 原生实现 过渡动画
于 2024-07-02 18:13:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mydo/article/details/139835845
版权
开发疑难秒懂百科 专栏收录该内容
196 篇文章 134 订阅 ¥69.90 ¥99.00
订阅专栏

在这里插入图片描述

功能需求

何曾几时，秃头码农们多么希望 SwiftUI 里原生 TabView 的标签页切换能够有转场动画效果。

在这里插入图片描述

如上图所示，我们在 SwiftUI 原生 TabView 视图的标签页切换时展现出美美哒的转场动画，本实现支持最新的 iPadOS 18 和 iOS 18 系统。这是怎么做到的呢？

在本篇博文中，您将学到以下内容

闲言少叙，让我们马上开始 TabView 切换动画之旅吧！

Let’s dive in！😉

1. “小模型有大智慧”

首先，为了区分各个标签页我们需要用不同的标识符来描述它们。

让我们创建一个专门的 TabValue 枚举类型负责此事：

enum TabValue: Hashable, Compara
了解本专栏 订阅专栏 解锁全文
大熊猫侯佩
关注
  • 17
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 11
    评论
专栏目录
订阅专栏
SwiftUI 6.0（iOS/iPadOS 18）中全新的 Tab 以及 Sidebar+悬浮 TabView 样式
享受开发，颠倒银河
06-20 1804
在本篇博文中，我们介绍了 SwiftUI 6.0（iPadOS 18/iOS 18）新标签页中新增的 Tab 和 TabSection 原生视图，并进一步讨论了如何让 TabView 支持 Sidebar 样式以及其它有趣的新特性。
Android博客大汇总
shshaashsh的博客
09-27 756
目录介绍 链接:https://juejin.im/post/5d60ad5df265da03c42899f1 01.基础组件(9篇) 02.IPC机制(7篇) 03.View原理(9篇) 04.动画机制(2篇) 05.Res资源(6篇) 06.消息机制(12篇) 07.多媒体(16篇) 08.View事件(9篇) 09.多线程(12篇) 10.Window(19篇) 11.WebView(4篇)...
基于 HTML5 WebGL 智能城市的模拟运行
weixin_33895516的博客
05-05 485
2019独角兽企业重金招聘Python工程师标准>>> ...
基于 HTML5 WebGL 的 3D 工控裙房系统
HT for Web 3D
10-23 510
前言 工业物联网在中国的发展如火如荼，网络基础设施建设，以及工业升级的迫切需要都为工业物联网发展提供了很大的机遇。中国工业物联网企业目前呈现两种发展形式并存状况：一方面是大型通讯、IT企业的布局；一方面是传统工业软件和工业网络企业自发地延伸，由产品提供商发展为方案供应商。什么叫做裙房？裙房是指附属于主高楼并与之连成一体的低层建筑。本文的 Demo 是针对于裙房做的，但是在工业监控系统中有很多雷同...
基于 WebGL 的 HTML5 3D 工控裙房系统
HT for Web 3D
03-27 475
工业物联网在中国的发展如火如荼，网络基础设施建设，以及工业升级的迫切需要都为工业物联网发展提供了很大的机遇。中国工业物联网企业目前呈现两种发展形式并存状况：一方面是大型通讯、IT企业的布局；一方面是传统工业软件和工业网络企业自发地延伸，由产品提供商发展为方案供应商。什么叫做裙房？裙房是指附属于主高楼并与之连成一体的低层建筑。本文的 Demo 是针对于裙房做的，但是在工业监控系统中有很多雷同的部分，比如动画、点击切换、点击隐藏、故障展示、开关、数据展示等等，都是比较通用的一些功能。所以针对这个 Demo 将这
ObjC开发-常用第三方开源框架介绍
auspark的专栏
11-08 4761
iOS开发-常用第三方开源框架介绍(你了解的ios只是冰山一角)，ios冰山一角 图像： 1.图片浏览控件MWPhotoBrowser 实现了一个照片浏览器类似iOS自带的相册应用，可显示来自手机的图片或者是网络图片，可自动从网络下载图片并进行缓存。可对图片进行缩放等操作。 下载：https://github.com/mwaterfall/MWPhotoBr...
SwiftUI编程实现不同TabView标签页中任意导航层级视图之间相互跳转的演示代码
04-03
该资源是 <<SwiftUI编程实现不同TabView标签页中任意导航层级视图之间相互跳转>> 博文的配套源代码,博文链接地址如下： https://blog.csdn.net/mydo/article/details/123754090 在本篇博文中，您将学到以下内容: ...
macOS SwiftUI tabView构建切换组件
12-18
macOS SwiftUI tabView构建切换组件。TabView，使用交互式用户界面元素在多个子视图之间切换的视图。选项卡视图仅支持Text，Image或Image后跟Text的选项卡项。 传递任何其他类型的视图都将导致可见但为空的标签项。
SwiftUI TabView 构建滚动轮播图PagedTabViewStyle
12-18
SwiftUI TabView 构建滚动轮播图.1、在分页工具栏呈现半透明背景 PageIndexViewStyle(backgroundDisplayMode: .always)。2、创建页面滚动视图 tabViewStyle(PageTabViewStyle())
StatefulTabView:一个SwiftUI TabView，它保留每个标签以及其他一些东西的状态
04-23
一个SwiftUI UITabBarController实现，保留了制表符更改之间的状态。 非常感谢和所有帮助完善此因为这是设置此项目的主要起点。 要求 iOS 13.0以上 Xcode 11.2以上 迅捷5+ 安装 迅捷软件包管理器 在Xcode 11或更高...
SwiftUI实现图片轮播器SwiftUIBanner
07-04
SwiftUI是苹果在2019年WWDC大会上推出的新一代UI框架，它为iOS、macOS、tvOS和watchOS等平台提供了统一的声明式界面构建方式。在这个标题为"SwiftUI实现图片轮播器SwiftUIBanner"的话题中，我们将深入探讨如何使用...
iPhone真机运行App提示“不再可用“(No Longer Available)的原因及解决
热门推荐
享受开发，颠倒银河
07-23 2万+
问题现象 在iPhone真机上运行App时，弹出App"不再可用"提示框: 上图分别显示了中文和英文环境下对应的出错信息。 那么，发生该错误的原因是什么？我们又该如何解决它呢？ 别急，让我们娓娓道来… ???? 问题分析 1. 从App的组成谈起 我们知道在iOS中，每个App都是代码和资源的集合。 其中代码包括主程序可执行文件以及嵌入和引用的各种库(静态和动态库) 资源包括界面描述文件、图片集、第三方字体、音频等等。 从安全的角度来说，iOS不可能允许任意App随意执行，所以每个App都会被签名，
SwiftUI如何在动画完成时得到通知
享受开发，颠倒银河
12-14 8955
在App开发中，少不了动画的点缀。有时候我们希望在动画完成时得到通知，这在UIKit编程中是家常便饭的事，但在SwiftUI中又该怎么做呢？ 本博向大家演示了如何在单一、复合以及重复动画的完成时如何得到通知，相信看完之后一定收获满满。
Xcode12真机调试iOS15提示The code signature version is no longer supported错误的解决
享受开发，颠倒银河
09-21 5906
用Xcode12.2连接系统为iOS15的真机调试时出现错误，提示: The code signature version is no longer supported。在不升级Xcode的情况下如何解决这个问题呢？Let’s find out!
iOS应用突然无法从App Store获取到内购(IAP)产品列表的解决
享受开发，颠倒银河
01-13 4613
问题现象 Apple开发中，在应用中嵌入内购(IAP)功能的小伙伴们可能会发现，吃着火锅唱着歌，突然App就无法获取到产品列表了，而且产品请求操作并不会返回任何错误。 此时检查发现，并没有对App的内购逻辑做任何改动。 那么，这是什么原因导致的呢？ Let’s find out！???? 问题分析 1. 排除其它原因 首先，你先得排除不是你IAP内购逻辑变更或其他原因导致的。 在SKProductsRequestDelegat代理实现的productsRequest方法里下断点: func produc
App 提交审核被拒提示：Guideline 2.1 - Performance - App Completeness 的原因及解决
享受开发，颠倒银河
12-22 4102
在本篇博文中，我们讨论了 App 提交审核被拒且提示 “Guideline 2.1 - Performance - App Completeness ” 错误的原因，并给出审核必过的解决方案。
SwiftUI动画利用视觉魔术巧妙实现无限滚动进度条
享受开发，颠倒银河
04-05 3540
为了表示任务的进度状态，我们可以在SwiftUI中使用ProgressView。 不过ProgressView只在SwiftUI 2.0(iOS 14.0+)中可用，而且无法表示无限滚动状态。 那么，我们能不能在SwiftUI中实现一款无限滚动的进度条呢? 在本篇博文中，您将学到以下内容： - SwiftUI动画实现无限滚动进度条 - 进一步实现“首尾相连”的无限滚动 - 使用复合动画进一步提升视觉效果
SwiftUI中NavigationLink多层嵌套导航无法返回上一层的原因及解决
享受开发，颠倒银河
03-27 3399
SwiftUI中从子视图通过将状态置为true，导航进入了孙子视图；但是此时将状态重置为false，却不能从孙子视图回退到子视图，为什么会这样呢？Let's find out!
qml tabview 切换页面 动画
最新发布
07-15
要为QML TabView添加页面切换动画，可以使用Transition元素和State元素来实现。以下是一个示例： ```qml import QtQuick 2.15 import QtQuick.Controls 2.15 TabView { id: tabView width: 400 height: 300 // 添加页面切换动画 transitions: Transition { SequentialAnimation { PropertyAnimation { target: contentItem property: "opacity" from: 0 to: 1 duration: 300 } PropertyAnimation { target: contentItem property: "scale" from: 0.8 to: 1 duration: 300 } } } Tab { title: "Tab 1" Rectangle { color: "red" } } Tab { title: "Tab 2" Rectangle { color: "blue" } } Tab { title: "Tab 3" Rectangle { color: "green" } } } ``` 在这个示例中，我们通过在TabView上添加transitions元素来定义页面切换动画。在SequentialAnimation中，我们使用PropertyAnimation分别对contentItem的opacity和scale属性进行动画效果设置。通过从0到1的透明度变化和从0.8到1的缩放变化，实现了淡入和放大的过渡效果。 当您切换Tab页时，TabView会自动应用定义的动画效果。 请注意，该示例只是一个简单的演示。您可以根据自己的需求进行更复杂的动画设置。希望对您有所帮助！如果您还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大熊猫侯佩

赏点钱让我买杯可乐好吗 ;)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值