2.4 创建北京简介视图

本节我们将使用BeijingView创建一个全屏幕场景，并在该场景中运用SwiftUI的动画技术让用户有一个良好的视觉体验。

2.4.1 创建简介视图

首先，让我们打开BeijingView.swift文件，修改Body部分的代码如下。

在VStack容器内部，我们依次添加了Spacer、Image、Text和Spacer，利用上下两个Spacer可以撑开VStack容器内部的空间。这样就可以把Image和Text调整到屏幕的中央位置。这里设置Image的尺寸为240点×240点，阴影的颜色为之前所设置的颜色集ColorBlackTransparentDark。

接下来，我们为VStack容器添加background修饰器，使用Background图像集作为背景。为了可以全屏显示背景，再为VStack容器添加edgesIgnoringSafeArea修饰器，让其忽略屏幕4个方向的安全区域限制，从而让VStack容器充满屏幕，效果如图2-19所示。

图2-19 BeijingView添加Image和Text后的效果

我们还要继续对视图中的文本进行调整，将Text嵌入一个新的VStack容器中，代码如下。

我们将之前代码中Text那一行的代码替换为一个新的VStack容器，在该容器中有两个Text。相信在你照着写代码的时候就可以体会到每个修饰器的作用。其中，lineLimit（nil）用于将Text设置为无行数限制。lineSpacing修饰器用于设置Text的行间距。

现在，我们可以仿照AppView的代码，在Preview部分开启浅色和深色两种模式的预览效果，在预览窗口中的效果如图2-20所示。

图2-20 为BeijingView设置文本效果

2.4.2 为简介视图添加动画效果

接下来，我们要为当前的视图添加一个简单的动画效果。修改BeijingView中的代码如下。

我们先在Properties部分添加一个被＠State封装的布尔型属性pulsateAnimation。然后在最外层的VStack容器添加一个onAppear修饰器，当视图出现在屏幕上的时候，将该属性值修改为true。一旦该值为true，Image就会产生两个动画效果。通过scaleEffect修饰器让图像的大小从原来的0.9倍变成1.0倍，通过opacity修饰器让透明度从0.9变成1.0。动画方式为easeInOut，动画时长为1.5s，并且是永久正反向动画效果。

为了查看程序的整体运行效果，我们可以在AppView的预览窗口中启动Live模式查看BeijingView的动画效果。