Skip to content

绘图和动画

使用 SwiftUI 时,无论用作何处,我们都可以单独为视图添加动画,或者对视图的状态添加动画。 SwiftUI 为我们处理所有动画的组合、重叠和中断的复杂性。

在本文中,我们会给包含图表的视图设置动画,跟踪用户在使用 Landmarks app 时行为。我们会看到通过使用 animation(_:) 修饰符为视图设置动画是多么简单。

请先下载本节资源文件,并按照下面的步骤进行。

  • 预计完成时间:20 分钟
  • 资源文件:下载

1. 添加图表视图

在添加动画之前,还需要一些数据来制作动画。在这一节中,我们将导入徒步的数据并建立模型,然后添加一些预制的视图,在图形中显示这些数据。

第 1 步

将在上文中下载文件的资源文件夹中的 hikeData.json 文件拖入到 Xcode 左侧的文件目录中。在点击 Finish 之前,一定要选择 Copy items if needed

第 2 步

打开菜单项 File > New > File,在项目的 Model 目录中创建一个新的 Swift File,名为 Hike.swift

Landmark 结构体一样,Hike 结构体实现 Codable 类型,其属性与相应的数据文件中的键相匹配。

第 3 步

ModelData 中添加一个 hikes 数组变量。

因为在初始化加载 hike 数据后不会修改它,因此不需要用 @Published 属性来标记它。

第 4 步

将下载文件的资源文件夹中的 Hikes 文件夹拖入项目的 Views 目录。勾选 Copy items if neededCreate groups,在点击 Finish

第 5 步

HikeView.swift 中,打开实时预览来测试显示和隐藏图表。

请确保在本教程中使用实时预览,这样你就可以实验每一步的结果。

绘图和动画 has loaded