[Swift通天遁地]九、拔剑吧-(15)搭建具有滑出、视差、3D变形等切换效果的引导页

软件一般包含一个引导页面，向用户形象的展示产品的主要特性。

本文将演示搭建具有滑出、视差、3D变形等切换效果的引导页。

GitHub项目：【ariok/BWWalkthrough】,下载并解压文件。

【Pod】->选择两个文件：

【BWWalkthroughViewController.swift】、

【BWWalkthroughPageViewController.swift】

将选择的两个文件，拖动到项目中。在弹出的文件导入确认窗口中，点击【Finish】

创建一个自定义的视图控制器，用来制作三维变形的切换效果。

在项目文件夹上点击鼠标右键，弹出右键菜单。

【New File】->【Cocoa Touch】->【Next】->

【Class】：CustomPageViewController

【Subclass of】:UIViewController

【Language】：Swift

->【Next】->【Create】

点击打开【CustomPageViewController.swift】

现在开始编写代码，实现三维变形的切换效果。 

 1 import UIKit
 2 
 3 //继承已经安装的第三方类库。
 4 class CustomPageViewController: UIViewController,BWWalkthroughPage {
 5     
 6     //添加一个用于三维变形的图像属性。
 7     @IBOutlet var imageView:UIImageView?
 8     //添加一个用于三维变形的标签对象
 9     @IBOutlet var titleLabel:UILabel?
10     //最后添加一个用于三维变形的子标题标签对象。
11     @IBOutlet var textLabel:UILabel?
12     
13     override func viewDidLoad() {
14         super.viewDidLoad()
15 
16         // Do any additional setup after loading the view.
17     }
18     
19     //添加一个代理方法，用来监听页面滚动切换的事件。
20     func walkthroughDidScroll(_ position: CGFloat, offset: CGFloat)
21     {
22         //创建一个三维矩阵，该矩阵没有缩放、旋转、歪斜和透视等变形效果。
23         var tr = CATransform3DIdentity
24         //设置三维变形的景深效果，其值越接近0，景深效果就越强烈。
25         tr.m34 = -1/500.0
26         
27         //设置标题文字层的变形效果为三维旋转。
28         titleLabel?.layer.transform = CATransform3DRotate(tr, CGFloat(M_PI) * (1.0 - offset), 1, 1, 1)
29         //给子标题文字的层，添加三维旋转的变形效果。
30         textLabel?.layer.transform = CATransform3DRotate(tr, CGFloat(M_PI) * (1.0 - offset), 1, 1, 1)
31         
32         //获得当前页面的滚动偏移，
33         var tmpOffset = offset
34         //当偏移值大于1时
35         if tmpOffset > 1.0
36         {
37             //设置图片向下方移动
38             tmpOffset = 1.0 + (1.0 - tmpOffset)
39         }
40         
41         imageView?.layer.transform = CATransform3DTranslate(tr, 0 , (1.0 - tmpOffset) * 200, 0)
42     }
43     
44     override func didReceiveMemoryWarning() {
45         super.didReceiveMemoryWarning()
46         // Dispose of any resources that can be recreated.
47     }
48 }

给图像视图的层添加三维移动的变形效果。

点击资源文件夹【Assets.xcassets】，打开故事板文件【Main.storyboard】

使用快捷键【Command】+【D】,复制当前选择的视图控制器，然后将它移动到适当的位置。

打开控件库列表窗口，往故事板中添加一个按钮控件，

作为执行上一页操作的按钮。选择视图控制器，点击身份检查器图标，进入身份设置面板。

【Class】:BWWalkthroughViewController。输入由第三方提供的类名。

设置视图控制器在故事板中的唯一标志符。

【Storyboard ID】：walk

点击辅助编辑器图标，打开辅助编辑器，

将故事板中的控件和类文件中的属性进行连接。

在左侧的项目导航区，打开视图控制器的代码文件【ViewController.swift】

现在开始编写代码，添加一个按钮控件，当点击按钮时，弹出引导窗口。

 1 import UIKit
 2 
 3 //使类遵循引导视图控制器代理协议，将使用该协议中的方法，监听页面的切换事件。
 4 class ViewController: UIViewController, BWWalkthroughViewControllerDelegate {
 5 
 6     override func viewDidLoad() {
 7         super.viewDidLoad()
 8         // Do any additional setup after loading the view, typically from a nib.
 9         
10         //添加一个按钮，当用户点击该按钮时，弹出引导窗口。
11         let goThrough = UIButton(frame: CGRect(x: 20, y: 40, width: 280, height: 40))
12         //将按钮放置在根视图的中心位置。
13         goThrough.center = self.view.center
14         //设置按钮的背景颜色为橙色
15         goThrough.backgroundColor = UIColor.orange
16         //同时设置按钮在正常状态下的标题文字。
17         goThrough.setTitle("Go Through", for: .normal)
18         //给按钮控件绑定点击事件。
19         goThrough.addTarget(self, action: #selector(ViewController.showWalkthrough), for: .touchUpInside)
20         
21         //设置根视图的背景颜色为橙色
22         self.view.backgroundColor = UIColor.orange
23         //并将按钮控件添加到根视图
24         self.view.addSubview(goThrough)
25     }
26     
27     //添加一个方法，用来响应按钮的点击事件。
28     @objc func showWalkthrough()
29     {
30         //从项目中加载指定名称的故事板文。
31         let stb = UIStoryboard(name: "Main", bundle: nil)
32         //获得故事板中的指定标识符的引导视图控制器。
33         let walkthrough = stb.instantiateViewController(withIdentifier: "walk") as! BWWalkthroughViewController
34         
35         //使用相同的方式，获得其他四个视图控制器。
36         let page_zero = stb.instantiateViewController(withIdentifier: "walk0")
37         let page_one = stb.instantiateViewController(withIdentifier: "walk1")
38         let page_two = stb.instantiateViewController(withIdentifier: "walk2")
39         let page_three = stb.instantiateViewController(withIdentifier: "walk3")
40         
41         //设置引导视图控制器的代理，为当前的视图控制器对象。
42         walkthrough.delegate = self
43         //将其他四个控制器，添加到引导视图控制器。
44         walkthrough.addViewController(page_one)
45         walkthrough.addViewController(page_two)
46         walkthrough.addViewController(page_three)
47         walkthrough.addViewController(page_zero)
48         
49         //以模态的方式，打开引导视图控制器
50         self.present(walkthrough, animated: true, completion: nil)
51     }
52     
53     //添加一个方法，用来监听引导页面发生切换的事件。
54     func walkthroughPageDidChange(_ pageNumber: Int)
55     {
56         print("Current Page \(pageNumber)")
57     }
58     
59     //添加一个方法，用来响应关闭按钮的点击事件
60     func walkthroughCloseButtonPressed()
61     {
62         self.dismiss(animated: true, completion: nil)
63     }
64     
65     override func didReceiveMemoryWarning() {
66         super.didReceiveMemoryWarning()
67         // Dispose of any resources that can be recreated.
68     }
69 }

继续编写代码，使引导页面在程序启动后立刻打开。

在左侧的项目导航区，打开应用程序的代理文件【AppDelegate.swift】

 1 import UIKit
 2 
 3 @UIApplicationMain
 4 class AppDelegate: UIResponder, UIApplicationDelegate, BWWalkthroughViewControllerDelegate {
 5 
 6     var window: UIWindow?
 7 
 8     //使类遵循引导视图控制器代理协议，将使用该协议中的方法，监听页面的切换事件。
 9     func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: Any]?) -> Bool {
10         // Override point for customization after application launch.
11         
12         //从项目中读取指定名称的故事板文件。
13         let stb = UIStoryboard(name: "Main", bundle: nil)
14         //获得故事板中的，指定标识符的引导视图控制器。
15         let walkthrough = stb.instantiateViewController(withIdentifier: "walk") as! BWWalkthroughViewController
16         //使用相同的方式，获得其他的四个视图控制器。
17         let page_zero = stb.instantiateViewController(withIdentifier: "walk0")
18         let page_one = stb.instantiateViewController(withIdentifier: "walk1")
19         let page_two = stb.instantiateViewController(withIdentifier: "walk2")
20         let page_three = stb.instantiateViewController(withIdentifier: "walk3")
21         
22         //设置引导视图控制器的代理，为当前的应用程序代理对象。
23         walkthrough.delegate = self
24         //将其他四个控制器，添加到引导视图控制器。
25         walkthrough.addViewController(page_one)
26         walkthrough.addViewController(page_two)
27         walkthrough.addViewController(page_three)
28         walkthrough.addViewController(page_zero)
29         
30         //设置当前窗口的根视图控制器，为引导页视图控制器。
31         self.window?.rootViewController = walkthrough
32         
33         return true
34     }
35 
36     //添加一个方法，用来监听引导页面发生切换的事件。
37     func walkthroughPageDidChange(_ pageNumber: Int)
38     {
39         print("Current Page \(pageNumber)")
40     }
41     
42     func applicationWillResignActive(_ application: UIApplication) {
43         // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
44         // Use this method to pause ongoing tasks, disable timers, and throttle down OpenGL ES frame rates. Games should use this method to pause the game.
45     }
46 
47     func applicationDidEnterBackground(_ application: UIApplication) {
48         // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
49         // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
50     }
51 
52     func applicationWillEnterForeground(_ application: UIApplication) {
53         // Called as part of the transition from the background to the inactive state; here you can undo many of the changes made on entering the background.
54     }
55 
56     func applicationDidBecomeActive(_ application: UIApplication) {
57         // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
58     }
59 
60     func applicationWillTerminate(_ application: UIApplication) {
61         // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
62     }
63 }