第34天 项目 6 第三部分
戴安娜·沙夫-亨特曾说过:“目标就是有截止日期的梦想。” 我们知道你的目标是学习 SwiftUI,这也是你来到这里的原因,所以现在是时候给自己它设定一个截止日期了:你今天的任务是完成三个动画挑战,这些挑战将真正考验你的技能——以及你的创造力!
正如你将看到的,今天的其中一个挑战特别要求你发挥创造力,亲自尝试一些东西。现在你已经掌握了创建各种动画和过渡效果所需的所有工具,所以唯一能阻止你的就是缺乏练习的机会。
好了,机会就在就在眼前——祝你祝你好运!
今天你需要学习项目 6 的总结章节,完成章节复习,然后完成所有三个挑战。
- 动画:总结
- 项目 6 复习:动画
动画:总结
作者:保罗·哈德森 2021 年 11 月 2 日
这个技巧项目一开始比较简单,之后经历了一些波折,逐渐深入到更高级的动画内容,但希望它能让你了解到 SwiftUI 动画系统的强大之处——以及它的灵活性!
就像我之前说过的,动画不仅能让应用看起来更出色,还能增添额外的含义。所以,与其让一个视图突然消失,不如添加一个过渡效果,帮助用户理解正在发生的变化,不是吗?
另外,别忘了在用户界面中加入“趣味性”元素。我最喜欢的 iOS 动画是苹果在 iOS 7 中弃用的一个——那是“钱包”应用中删除凭证时的动画:会出现一个金属碎纸机,将你的凭证切成十几条,然后这些纸条再掉落消失。这个动画只比现在的动画多花了零点几秒,但它既美观又有趣!
复习所学内容
任何人都能看完一个教程,但要记住所学的知识,还需要实际付出努力。我的职责是确保你能从这些教程中收获尽可能多的东西,完成后面的练习题,可以帮助你检验自己的学习成果。
挑战
学习的最佳方式之一就是尽可能多地编写自己的代码,所以这里有三种扩展本应用的方式,帮助你确保完全理解所学内容。
回到“猜国旗”项目,添加一些动画效果:
- 当你点击一面国旗时,让它围绕 Y 轴旋转 360 度。
- 让另外两个按钮的不透明度渐变为 25%。
- 为用户未选择的两个国旗添加第三种效果——可以是缩小尺寸,也可以是向不同方向翻转,大胆尝试吧!
这些挑战并不容易。 虽然只需要几行代码,但你需要仔细思考使用哪些修饰符才能获得理想的动画效果。尝试添加一个 @State 属性来跟踪用户点击的是哪面国旗,然后在旋转、淡入淡出以及你为第三个挑战选择的效果的条件修饰符中使用这个属性。
【练习题】动画
问题 1/12:以下哪些表述是正确的?
- 选项 1:使用 withAnimation() 始终会使用弹簧动画。
- 选项 2:我们可以在单个视图上使用多个 animation() 修饰符。
问题 2/12:以下哪些表述是正确的?
- 选项 1:blur() 修饰符会对视图应用高斯模糊效果,模糊半径可由我们指定。
- 选项 2:在从左到右的语言环境中,尾边(trailing edge)位于屏幕左侧。
问题 3/12:以下哪些表述是正确的?
- 选项 1:rotation3DEffect() 可以围绕多个轴旋转视图。
- 选项 2:offset() 修饰符可以让我们延迟动画。
问题 4/12:以下哪些表述是正确的?
- 选项 1:我们可以向 animation() 修饰符传递 nil。
- 选项 2:隐式动画无法循环。
问题 5/12:以下哪些表述是正确的?
- 选项 1:SwiftUI 无法为背景颜色添加动画。
- 选项 2:SwiftUI 内置了几种基础过渡效果。
问题 6/12:以下哪些表述是正确的?
- 选项 1:我们可以为 DragGesture 添加 onChanged() 和 onEnded() 修饰符。
- 选项 2:将 scaleEffect() 修饰符的值设为 100 时,视图会保持其自然尺寸。
问题 7/12:以下哪些表述是正确的?
- 选项 1:“缓入”(Ease in)动画开始时快,结束时慢。
- 选项 2:“缓入”(Ease in)动画开始时慢,结束时快。
问题 8/12:以下哪些表述是正确的?
- 选项 1:SwiftUI 可以为修改布尔值所引发的变化添加动画。
- 选项 2:clipped() 修饰符可以让我们指定一个形状,视图会在该形状内绘制。
问题 9/12:以下哪些表述是正确的?
- 选项 1:我们可以为绑定(binding)添加 animation() 修饰符。
- 选项 2:我们可以为视图添加动画,但无法为视图覆盖层(overlay)添加动画。
问题 10/12:以下哪些表述是正确的?
- 选项 1:非对称过渡(Asymmetric transitions)可以将过渡效果与显式动画结合使用。
- 选项 2:SwiftUI 可以同时为多个属性的变化添加动画。
问题 11/12:以下哪些表述是正确的?
- 选项 1:动画延迟以秒为单位指定。
- 选项 2:我们可以使用隐式动画或显式动画,但不能同时使用两者。
问题 12/12:以下哪些表述是正确的?
- 选项 1:rotation3DEffect() 可以让视图围绕其 X、Y、Z 轴旋转。
- 选项 2:过渡效果(Transitions)和动画(animations)是同一概念。