《Motion Design for iOS》（二十五）

標籤：

現在我們已經瞭解了Core Animation的基礎並且使用了優秀的架構JNWSpringAnimation來模仿彈簧系統，是時候來開始寫一些真實的範例程式碼了。

仿製一個iOS AlertView

重現一個熟悉的介面元素是一個很好的熟悉動畫開發的方式。首先，讓我們建立我們自己的標準iOS警告視圖。這是內建的警告視圖的樣子。

在本指南之前的章節中，我解釋了分解一個動畫的各個組成部分有多麼重要，這樣你就可以準確地構建它。僅僅說“警告框動畫進入螢幕”是不夠的，你需要準確地知道發生了什麼。讓我們來分解這個動畫。

1. 螢幕隨著漸入的一層半透明灰覆蓋變暗。
2. 警告框從完全透明以及比1.0倍大的大小開始，並動畫至100%不透明和1.0倍大小。
3. 消失的時候，它會淡出為完全透明並且比例會動畫減小到比1.0要小。
4. 陰暗的覆蓋層淡出並消失。

在我們進入詳細的代碼之前，讓我們看看我們要完成的警告框是什麼樣子的。

首先讓我們建立一個簡單的有白色背景的應用視窗。這是在應用的delegate類中，並且代碼會在app完成啟動的時候就立即運行。你可以在Alert View 1 Xcode工程中參考代碼。

- (BOOL)application:(UIApplication *)application    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    // Construct the main window for this application    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];    // All additional code in this example will go right here    self.window.backgroundColor = [UIColor whiteColor];    [self.window makeKeyAndVisible];    return YES;}

在這一步，我們有一個UIWindow，其位置和方向可以準確地填充螢幕，並且背景色被設為了白色。如果我們現在立馬運行它，它只會在模擬器中（或者你的手機，如果串連了的話）運行一個空的、白色的應用螢幕。現在來建立我們的覆蓋層，將其添加到螢幕上，並將透明度設為0.0，因為我們現在不想顯示它。

UIView *overlayView = [[UIView alloc] initWithFrame:self.window.bounds];overlayView.backgroundColor = [UIColor blackColor];overlayView.alpha = 0.0f;[self.window addSubview:overlayView];

這個覆蓋層是一個簡單的UIView，填充了整個主視窗對象。這意味著它會被放置在視窗的左上方，並且其寬和高會匹配視窗，從而覆蓋所有的內容。為了顯示我現在有的內容，如果我提高覆蓋層的不透明度，這就是看起來的樣子。

《Motion Design for iOS》（二十五）