景深視差經常被應用在遊戲項目中。

本文將演示創建一個簡單的景深視差滾動效果

首先確保已經安裝了所需的第三方類庫。雙擊查看安裝配置文件【Podfile】

1 platform :ios, ‘12.0‘
2 use_frameworks!
3 
4 target ‘DemoApp‘ do
5     source ‘https://github.com/CocoaPods/Specs.git‘
6     pod ‘Presentation‘
7 end

根據配置文件中的相關設置，安裝第三方類庫。

安裝完成之後，雙擊打開項目文件【DemoApp.xcodeproj】

在左側的項目導航區，打開應用程序的代理文件【AppDelegate.swift】。

  1 import UIKit
  2 //引入已經安裝的第三方類庫
  3 import Presentation
  4 
  5 @UIApplicationMain
  6 class AppDelegate: UIResponder, UIApplicationDelegate {
  7 
  8     var window: UIWindow?
  9 
 10     //添加一個由第三方類庫提供的控制器對象，作為當前類的一個屬性。
 11     lazy var presentationController: PresentationController =
 12
 
         {
 13             //對控制器進行初始化操作，
 14             let controller = PresentationController(pages: [])
 15             //並隱藏導航條的標題
 16             controller.setNavigationTitle = false
 17             
 18             //返回設置好的控制器對象
 19             return controller
 20     }()
 21     
 22     //
 
添加一個導航條按鈕控件，作為導航條左側的按鈕。
 23     lazy var leftButton: UIBarButtonItem = { [unowned self] in
 24         //對導航條按鈕進行初始化操作，
 25         //並設置它的標題，樣式和動作屬性。
 26         let button = UIBarButtonItem(title: "Previous page", style: .plain,
 27                                      target: self.presentationController,
 28                                      action: #selector(PresentationController.moveBack))
 29         
 30         //設置標題的前景顏色為白色
 31         button.setTitleTextAttributes([NSAttributedString.Key.foregroundColor : UIColor.white], for: .normal)
 32         //返回設置好的按鈕控件
 33         return button
 34         }()
 35     
 36     //創建另一個導航條按鈕控件，作為導航條右側的按鈕。
 37     lazy var rightButton: UIBarButtonItem = { [unowned self] in
 38         //對導航條按鈕進行初始化操作，並設置它的標題、樣式和動作屬性。
 39         let button = UIBarButtonItem(title: "Next page", style: .plain,
 40                                      target: self.presentationController,
 41                                      action: #selector(PresentationController.moveForward))
 42         
 43         //設置標題的前景顏色為白色，
 44         button.setTitleTextAttributes([NSAttributedString.Key.foregroundColor : UIColor.white], for: .normal)
 45         //並返回設置好的按鈕控件
 46         return button
 47         }()
 48     
 49 
 50     //在應用程序加載完成的方法中，
 51     func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
 52         // Override point for customization after application launch.
 53         
 54         //設置導航條的前景顏色為橙色。
 55         UINavigationBar.appearance().barTintColor = UIColor.orange
 56         //設置導航條的顏色為透明
 57         UINavigationBar.appearance().barStyle = .blackTranslucent
 58         
 59         //設置導航控制器左側的導航按鈕。
 60         presentationController.navigationItem.leftBarButtonItem = leftButton
 61         //設置導航控制器右側的導航按鈕。
 62         presentationController.navigationItem.rightBarButtonItem = rightButton
 63         
 64         //調用兩個方法
 65         //方法一：設置滾動的標題
 66         configureSlides()
 67         //方法二：設置具有景深效果的背景視圖
 68         configureBackground()
 69         
 70         //初始化一個和屏幕尺寸相同的窗口對象
 71         window = UIWindow(frame: UIScreen.main.bounds)
 72         //初始化一個導航控制器對象，作為窗口對象的根視圖控制器。
 73         let navigationController = UINavigationController(rootViewController: self.presentationController)
 74         //設置導航控制器的背景顏色為橙色。
 75         navigationController.view.backgroundColor = UIColor.orange
 76         
 77         //設置窗口對象的根視圖控制器，
 78         window?.rootViewController = navigationController
 79         //並使窗口對象作為應用程序的主窗口
 80         window?.makeKeyAndVisible()
 81         
 82         return true
 83     }
 84 
 85     //添加一個方法，用來配置滾動標題
 86     func configureSlides()
 87     {
 88         //初始化一個字體對象
 89         let font = UIFont(name: "ArialRoundedMTBold", size: 32.0)!
 90         //初始化一個顏色對象
 91         let color = UIColor.white
 92         //初始化一個段落樣式對象，
 93         let paragraphStyle = NSMutableParagraphStyle()
 94         //並設置段落的對齊方式為居中
 95         paragraphStyle.alignment = .center
 96         
 97         //初始化一個屬性常量，作為標題文字的字體、顏色和段落樣式。
 98         let attributes = [NSAttributedString.Key.font: font, NSAttributedString.Key.foregroundColor: color, NSAttributedString.Key.paragraphStyle: paragraphStyle]
 99         
100         //初始化一個字符串數組，作為五個滾動標題的內容。
101         let titles = ["Tutorial on how to make a profit", "Step I", "Step II", "Step III", "Thanks"].map {
102             //給每個滾動標題，設置相同的外觀樣式。
103             Content.content(forTitle: $0, attributes: attributes)
104         }
105         
106         //初始化另一個字符串數組，作為滾動子標題的內容。
107         //並同樣設置子標題的外觀樣式。
108         let texts = ["", "Collect underpants??", "??????????????????????", "Profit??", ""].map {
109             Content.content(forText: $0, attributes: attributes)
110         }
111         
112         //初始化一個滑動控制器類型的數組對象。
113         var slides = [SlideController]()
114         
115         //添加一個執行五次的循環語句，用來往數組中添加控制器。
116         for index in 0...4
117         {
118             //初始化一個滑動控制器對象，並設置它的標題，子標題和滾動的動畫效果
119             let controller = SlideController(contents: [titles[index], texts[index]])
120             controller.add(animations: [Content.centerTransition(forSlideContent: titles[index]), Content.centerTransition(forSlideContent: texts[index])])
121             
122             //將滑動控制器對象添加到數組中。
123             slides.append(controller)
124         }
125         
126         //滑動控制器對象可以添加多個內容，這裏往數組的最後一個控制器中，添加一張圖片。
127         slides[4].add(content: Content.content(forImage: UIImage(named: "HyperLogo")!))
128         
129         //將滑動控制器數組添加到景深視圖控制器中。
130         presentationController.add(slides)
131     }
132     
133     //添加另一個方法，用來配置具有景深效果的背景視圖
134     func configureBackground()
135     {
136         //初始化一個圖像視圖數組，作為背景視圖中的三張浮動圖片。
137         let images = ["Cloud1", "Cloud2", "Cloud1"].map {
138             UIImageView(image: UIImage(named: $0))
139         }
140         
141         //添加一個視差內容，並設置它的初始位置在屏幕的最左邊。
142         let content1 = Content(view: images[0], position: Position(left: -0.3, top: 0.2))
143          //添加第二個視差內容，並設置它的初始位置在屏幕的最右邊。
144         let content2 = Content(view: images[1], position: Position(right: -0.3, top: 0.22))
145          //添加第三個視差內容，並設置它的初始位置在屏幕的中心。
146         //該視差內容將在標題滾動時，始終保持靜止狀態。
147         let content3 = Content(view: images[2], position: Position(left: 0.5, top: 0.5))
148         
149         //將三個視差內容，添加到背景視圖。
150         presentationController.addToBackground([content1, content2, content3])
151         
152         //設置第一個頁面的視差滾動效果，
153         presentationController.addAnimations([
154             //將第一個視差內容，在水平方向上，向右滾動到0.2的位置
155             TransitionAnimation(content: content1, destination: Position(left: 0.2, top: 0.2)),
156             //將第二個視差內容，在水平方向上，向左滾動到0.3的位置
157             TransitionAnimation(content: content2, destination: Position(right: 0.3, top: 0.22)),
158             //給位於中心位置的視圖內容，添加一個出棧動畫。
159             PopAnimation(content: content3, duration: 1.0)
160             ], forPage: 0)
161         
162         //設置第二個頁面的視差滾動效果
163         presentationController.addAnimations([
164             
165             //將第一個視差內容，在水平方向上，向右滾動到0.3的位置
166             TransitionAnimation(content: content1, destination: Position(left: 0.3, top: 0.2)),
167             //將第二個視差內容，在水平方向上，向左滾動到0.4的位置
168             TransitionAnimation(content: content2, destination: Position(right: 0.4, top: 0.22))
169             ], forPage: 1)
170         
171         //設置第三個頁面的視差滾動效果
172         presentationController.addAnimations([
173             //將兩個視差內容，在水平方向上都滾動到0.5的位置
174             TransitionAnimation(content: content1, destination: Position(left: 0.5, top: 0.2)),
175             TransitionAnimation(content: content2, destination: Position(right: 0.5, top: 0.22))
176             ], forPage: 2)
177         
178         //設置第四個頁面的視差滾動效果
179         presentationController.addAnimations([
180             //將第一個視差內容，在水平方向上，向右滾動到0.6的位置
181             TransitionAnimation(content: content1, destination: Position(left: 0.6, top: 0.2)),
182             //將第二個視差內容，在水平方向上，向左滾動到0.7的位置
183             TransitionAnimation(content: content2, destination: Position(right: 0.7, top: 0.22))
184             ], forPage: 3)
185         
186         //設置第五個頁面的視差滾動效果
187         presentationController.addAnimations([
188             //將第一個視差內容，在水平方向上，向右滾動到0.8的位置
189             TransitionAnimation(content: content1, destination: Position(left: 0.8, top: 0.2)),
190             //將第二個視差內容，在水平方向上，向左滾動到0.9的位置
191             TransitionAnimation(content: content2, destination: Position(right: 0.9, top: 0.22))
192             ], forPage: 4)
193     }
194     
195     func applicationWillResignActive(_ application: UIApplication) {
196         // 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.
197         // Use this method to pause ongoing tasks, disable timers, and invalidate graphics rendering callbacks. Games should use this method to pause the game.
198     }
199 
200     func applicationDidEnterBackground(_ application: UIApplication) {
201         // 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.
202         // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
203     }
204 
205     func applicationWillEnterForeground(_ application: UIApplication) {
206         // Called as part of the transition from the background to the active state; here you can undo many of the changes made on entering the background.
207     }
208 
209     func applicationDidBecomeActive(_ application: UIApplication) {
210         // 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.
211     }
212 
213     func applicationWillTerminate(_ application: UIApplication) {
214         // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
215     }
216 }

[Swift通天遁地]九、拔劍吧-(13)創建頁面的景深視差滾動效果