第8章第9节：给页面里的内容添加动画效果 [SwiftUI快速入门到实战]

最新推荐文章于 2021-09-26 20:38:27 发布
原创 最新推荐文章于 2021-09-26 20:38:27 发布 · 240 阅读 · 0
标签
#动画 #swift #swiftui #swiftui教程 #ios开发
本章节介绍如何在 SwiftUI 中为健身应用的页面内容添加动画效果，包括标题、列表、图表和按钮的渐显动画，以及图表高度变化的弹性动画。通过设置布尔属性控制动画的播放时机，利用 `onAppear` 方法启动动画，并通过调整延迟时间和动画曲线实现平滑过渡。

  1. 您已经完成了健身应用两个主要页面的制作，现在来给两个页面的内容添加动画效果，首先返回编辑器的顶部。
    SwiftUI快速入门到实战

  2. 添加一个布尔类型的属性，标识是否开始播放动画。
    SwiftUI快速入门到实战

  3. 设置标题视图的默认不透明度为0，当开始执行动画时，视图逐渐显示出来。
    SwiftUI快速入门到实战

  4. 使用相同的方式，给列表视图添加渐显动画，并设置动画的延迟时间为0.2秒。
    SwiftUI快速入门到实战

  5. 给图表的标题视图添加渐显动画，并设置动画的延迟时间为0.4秒。

订阅专栏 解锁全文 限时秒杀 ¥44.95 限时期限 超级会员免费看
SwiftfulLoadingIndicators:轻量级SwiftUI加载动画的集合
04-13
SwiftfulLoadingIndicators 轻量级加载动画的集合，可以使用1行代码将其应用于任何SwiftUI视图。 所有动画都是使用SwiftUI框架（在某些情况下是Combine框架）构建的。 :thumbs_up: 20多个动画！ :artist_palette: 适用于任何颜色 :toolbox: 自定义速度和尺寸 :check_mark_button: 没有可能会对UI产生负面影响的关键帧动画或DispatchQueue调用 :check_mark_button: 源文件没有依赖关系，可以无问题地提取 安装 迅捷软件包管理器 Swift软件包管理器是用于管理Swift代码分发的工具。 要在Xcode项目中将SwiftfulLoadingIndicators与Swift Package Manager结合使用，请执行以下操作： 文件-> Swift软件包->添加软件包依赖关系-> 添加此存储库的URL： : 用法 首先，将包导入到您的文件中。 import SwiftfulLoadi
SwiftUI 2.0 实现等待效果Loading动画(ProgressView)
iCloudEnd的博客
07-01 2678
本文价值与收获 看完本文后，您将能够作出下面的界面 看完本文您将掌握的技能 实现等待效果 代码 import SwiftUI struct ContentView: View { @State var showFlag = false var body: some View { VStack{ Text("SwiftUI 显示等待动画") .padding(.all, 10)
iOS Swift 简单实现Loading动画
HnaQian的博客
12-14 7589
最近突然对动画特别感兴趣，尤其是最常见的加载动画，百度了一圈发现全是OC代码，这让我这个习惯写swift的假iOS开发很是郁闷。在网上扒的过程中看到一个挺简单的一个加载动画，看了一下原作者的代码，学习了一下原作者的思想，也感谢那位坐着哈。。。接下来看一下效果图接下来给大家具体讲解一下实现的过程其实整个动画就是一个画弧的过程，必须确定圆心、半径、弧的起始位置（敲黑板–重点），核心思想就是通过创建一个计
第1章第1节： 创建第一个SwiftUI项目 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
08-31 1918
1. 欢迎使用本专栏学习SwiftUI，这是苹果最近推出的最直观、最创新的全平台界面搭建技术，并且使用容易编写和阅读的声明式的语法。 2. 要使用SwiftUI技术，首先使用Xcode创建一个SwiftUI项目。保持默认的选项，点击下一步按钮，进入下一个设置页面。 3. 在产品名称输入框里，输入项目的名称。 4. 接着点击此处的下拉箭头，打开用户界面技术列表。 5. 在默认状态下，开发者使用故事板来搭建应用程序的用户界面，这里我们选择SwiftUI选项。 6. 然后打开生命周期管理选项列表。 7. Xc.
第7章第10节：给页面里的内容添加动画效果 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-10 249
您已经完成了整体页面结构的绘制，现在来给页面里的内容添加动画效果，以使页面更加生动。 首先添加一个布尔类型的属性，标识是否开始播放动画。 根据布尔属性的值设置按钮的偏移值，当开始执行动画时，按钮从屏幕的下方，向上滑入界面。 设置动画的时间曲线，以及动画的延迟时间为0.9秒。 调用父视图的onAppear方法，当视图显示时，切换布尔属性的值，从而开始动画的播放。 接着给顶部视图添加一个布尔属性，标识是否开始播放动画。 根据布尔属性的值设置标题的偏移值，当开始执行动画时，..
第7章第5节：给页面里的内容添加动画效果 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-10 230
您已经完成了页面框架的制作，现在来为页面里的元素添加动画入场效果。首先设置VStack视图的对齐方式为左对齐，使所有子视图左对齐。 初始化一个常量，其值为屏幕的宽度乘以-1，作为所有页面元素的初始位置。接着初始化一个值为0.2的常量，作为视图动画的延迟时间的递增量。 添加一个布尔类型的属性，标识是否开始播放动画。 设置图标的默认偏移值为offsetX的值，当开始执行动画时，图标从屏幕宽度的负值的位置，沿着水平方向，向右滑动到0的位置。 设置动画的时间曲线为插值弹性样式，并设置钢性..
第9章第28节：完成会员订阅页面的创建 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-26 463
在完成订阅选项视图的创建之后，现在来继续制作会员订阅页面。 添加一个HStack视图，作为三个订阅选项视图的容器。 添加一个循环语句，用来创建三个订阅选项视图。 初始化三个自定义的订阅选项视图，并设置不同的参数。 给订阅选项视图绑定触摸事件，当用户点击订阅选项时，设置订阅类型和日期范围属性的值。 设置会员订阅视图的宽度和高度，并增加10点和标题栏之间的距离。 接着来制作一个列表，用来详细说明订阅选项包含的内容。 首先制作列表里的第一条项目。 继续添加第二条..
第9章第26节：完成用户档案页面功能列表的制作 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-26 203
实现功能选项子视图的创建之后，现在可以制作功能列表了。由于点击每个功能都会跳转到不同的页面，所以在制作列表之后，首先创建几个目标页面。 保持默认的模板选项，点击此处的下一步按钮，进入下一步设置页面。 然后在文件名称输入框里，输入文件的名称。 选择此处的组名，作为文件保存的位置。 最后点击创建按钮，创建一个新的自定义视图文件，作为会员订阅功能页面。 暂时保持当前页面的内容为空，使用键盘上的快捷键，继续创建另一个功能页面。 保持默认的模板选项，点击此处的下一步按钮，进入下..
第9章第13节：完成课程标签列表页面的制作 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-26 280
本节课开始制作标签列表页面，当用户点击首页上方的某个课程类别时，将进入标签列表页面，使用标签对课程的类别进行细分。 点击此处的显示或隐藏导航器图标，隐藏左侧的项目导航面板。 接着开始编写代码，完成标签列表页面。 首先初始化一个数组常量，作为标签列表的数据源，标签名称右侧的中括号里的数字，表示该标签包含的互动教程的数量。 由于整个页面的内容是由上而下排列的，所以添加一个VStack视图，作为子视图的容器。 初始化一个标题栏视图，并设置相应的标题和子标题。 添加一个VSt..
第9章第29节：完成课程资源下载页面的制作 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-26 216
本节课您将完成资源下载页面的制作，该页面主要向用户显示课程资源的下载网址。首先创建一个自定义的视图，作为资源下载页面。 在打开的文件模板窗口中，选择此处的SwiftUI视图模板。 点击此处的下一步按钮，进入下一步设置页面。 然后在文件名称输入框里，输入文件的名称。 最后点击创建按钮，创建一个新的自定义视图文件。 现在开始编写代码，实现资源下载页面。 由于整个页面的内容是由上而下排列的，所以添加一个VStack视图，作为子视图的容器。 初始化一个标题栏视图，并设置..
第9章第14节：完成班级列表页面的制作 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-26 222
本节课开始制作班级页面，当用户点击首页上的某个班级时，将进入班级页面。在班级页面，将以章节对互动教程进行细分。 点击此处的显示或隐藏导航器图标，隐藏左侧的项目导航面板。 接着开始编写代码，完成班级页面的制作。 添加一个属性，用来读取环境变量里的值。 添加另一个属性，用来获取课程的列表。 由于整个页面的内容是由上而下排列的，所以添加一个VStack视图，作为子视图的容器。 初始化一个标题栏视图，并设置相应的标题和子标题。 由于给结构体添加了新的属性，所以需要更新P..
第4章第9节：如何制作样式丰富的过渡动画 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-07 186
您在上一节制作了显示或隐藏的动画，本节课您将制作样式更丰富、视觉更精美的过渡动画。 首先添加一个布尔属性，标识是否显示或隐藏指定的视图。 添加一个VStack视图，作为子视图的容器。 添加一个按钮控件，当用户点击按钮时，显示指定的图像视图。 在按钮的点击事件里，通过withAnimation函数，以动画的方式，toggle布尔属性的值。 接着根据布尔属性，添加一个判断语句。当布尔属性的值为真时，显示一个指定名称的图像视图。接着点击此处的实时预览按钮，进入实时预览模式。 ..
第2章第9节：使用TabView包含和切换多个页面 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-02 1186
本节课演示TabView标签视图的使用，标签视图位于屏幕的底部，可以让用户在几个页面之间进行快速的切换，效果类似于UITabBarController。 标签视图所控制的页面位于大括号之内。TabView仅支持类型为文本、图像或LayoutView的标签项，其他类型的视图将产生一个可见的空白标签项。 添加一个文本视图，作为标签视图的第一个标签项。 继续添加另一个文本视图，作为标签视图的第二个标签项。 设置第一个文本视图的字体尺寸为36。 接着来设置文本视图的选项卡，只有设置..
第9章第31节：演示用户档案六个功能页面的使用 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-26 202
本节课延续上一节课的内容，您已经创建了几个方法，用来统计缓存的大小，以及清除缓存文件。现在来继续完成界面的搭建。 添加一个按钮控件，当用户点击该按钮时，执行clearCache方法，以清除所有的缓存文件。同时修改showingAlert属性的值，以显示提示窗口。 给按钮添加指定的修饰符，修改按钮标题文字的样式。 接着添加一个文本视图，用来显示缓存的大小。 然后添加一个空格视图，使页面里的内容位于屏幕的中间位置。 给父视图应用指定的修饰符。 接着给VStack视图绑定一..
第9章第7节：将四个功能模块合并成首页 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-26 195
您已经完成了首页所有功能模块的制作，现在来将这些模块合并起来，首先点击此处的显示或隐藏导航区图标，显示左侧的项目导航区。 在此处的组名上点击鼠标右键，打开右键菜单。 选择新建文件命令，新建一个视图文件，作为首页视图的代码文件。 保持默认的模板选项，点击此处的下一步按钮，进入下一步设置页面。 然后在文件名称输入框里，输入自定义视图的文件名称。 最后点击创建按钮，创建一个新的自定义视图文件。 点击显示或隐藏导航区图标，隐藏左侧的项目导航区。 接着开始编写代码，将前面..
第9章第9节：完成历史课程列表页面的制作 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-26 338
您已经完成课程类型和课程列表类型的定义，现在来完成历史课程列表页面的制作，首先切换到您在第三节创建的历史课程视图文件。 然后点击显示或隐藏导航区图标，隐藏右侧的项目导航区。 现在开始编写代码，首先完成页面顶部的导航栏的制作。 添加一个属性，作为课程列表的数据源，并对上一节定义的课程列表类型进行实例化。 由于历史课程列表页面的结构是由上而下排列的，所以添加一个VStack视图，作为子视图的容器。 继续添加一个HStack视图，作为标题栏视图的容器。接着按下键盘上的comman..
第9章第15节：制作页面底部的四个选项卡 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-26 325
本节课制作位于底部的四个选项卡，分别对应于首页、刷题页面、客服页面、用户档案页面。您已经完成了首页的制作，现在来添加其它三个页面。 点击此处的新建文件命令，创建一个新的视图文件。 在打开的文件模板窗口中，选择SwiftUI视图模板。 点击下一步按钮，进入下一步设置页面。 然后在文件名称输入框里，输入文件的名称。 最后点击创建按钮，创建一个新的自定义视图文件，作为刷题列表页面。 在此处的组名上点击鼠标右键，再次打开右键菜单。 点击新建文件命令，创建一个新的视图文件..
第9章第23节：完成消息列表页面的制作 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-26 337
您已经完成了消息视图的制作，现在可以继续制作客服信息列表了。首先返回客服信息列表页面。 然后在循环语句里，添加刚刚创建的消息视图。 初始化一个消息视图，并根据属性的值，设置用户的类型。 当父视图显示之后，开始从服务器获取消息列表。接着点击此处的按钮，缩小预览窗口的显示比例。 点击此处的实时预览按钮，进入实时预览模式。 进入实时预览模式之后，从服务器获取消息列表，并显示在滚动视图中。继续编写代码，完成客服页面其它的内容。 首先设置消息视图左右两侧的内边距，以和屏幕的两侧..
第9章第20节：实现答题页面的制作 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-26 682
答题页面显示一道题目，并提供四个答案选项，用户可以从中选择一个答案。当用户提交答案时，在提交答案的上方显示用户的回答是否正确。 现在开始制作答题页面，首先点击此处的显示或隐藏导航器图标，隐藏左侧的项目导航面板。 然后点击此处的Resume按钮，刷新预览窗口。 接着编写代码，开始答题页面的制作。 添加一个属性，用来从服务器获取题目信息。 接着添加一个属性，标识用户所选的答案选项。 依次添加两个属性，表示用户答题正确的次数和错误的次数。 由于整个页面的内容是由上而下..
第7章第9节：完成电子商务列表页面剩余内容的制作 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-10 186
本节课继续产品列表页面的制作，首先添加一个滚动视图，设置滚动方向为垂直方向，并且不显示垂直滚动条。 添加一个循环语句，对包含六个元素的数组进行遍历。 接着添加一个HStack视图，作为并排两个产品图片的容器。 添加一个ZStack视图，作为产品图片和其背景视图的容器。 绘制一个圆角矩形，并设置圆角半径为10。接着按下键盘上的command键。 在按下command键的同时，点击此处的视图，打开快捷操作菜单。 选择此处的提取子视图命令，将HStack视图提取为一个自定义..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

李发展

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值