簡單動畫
是時候?qū)懸恍┐a了侥祭。讓我們先添加一個簡單的UIView對象到屏幕上并設(shè)置它的圓角叁执。我們要把它添加到我們的主窗口上時因?yàn)樗且粋€快速的例子，但在真實(shí)的app界面中你需要添加到管理當(dāng)前界面的視圖控制器中矮冬。
UIView *redBall = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
redBall.backgroundColor = [UIColor redColor];
redBall.layer.cornerRadius = 50;
[self.window addSubview:redBall];
我們創(chuàng)建了一個新的UIView對象并設(shè)置了它的框架來定義它在屏幕上的的X和Y坐標(biāo)徒恋，以及它的寬和高，然后將其添加到屏幕中欢伏。我們還將它的背景顏色屬性設(shè)為了紅色入挣。如我前面所說，要讓一個視圖的角變?yōu)閳A角硝拧，你需要獲取它的layer径筏，所以我們設(shè)置它的layer.cornerRadius值為50，這是寬度的一半障陶。如果你在你的app的delegate類的-application:didFinishLaunchingWithOptions方法中添加這個代碼滋恬，就可以在運(yùn)行后的屏幕上看到它。
這里是和上面一樣的功能抱究，但是是Swift而不是Objective-C寫的恢氯。你可以打開Balls In Swift Xcode工程導(dǎo)出這個例子的Swift版本。
var redBall = UIView(frame: CGRect(x: 50, y: 50, width: 100, height: 100))
redBall.backgroundColor = UIColor.redColor()
redBall.layer.cornerRadius = 50
view.addSubview(redBall)
我們在屏幕上有了一個紅色的球鼓寺！很激動勋拟，我知道。現(xiàn)在我們讓它動起來妈候。
iOS提供了一些內(nèi)置的技術(shù)來創(chuàng)建動畫：創(chuàng)建并添加一個CAAnimation到我們之后要討論的layer中敢靡，或者使用簡單的基于block的動畫方法來動畫化UIView的值。讓我們創(chuàng)建一個基于block的動畫來將圓從1.0擴(kuò)大到2.0倍苦银，這會讓它變成原來的兩倍大啸胧。
UIView *redBall = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
redBall.backgroundColor = [UIColor redColor];
redBall.layer.cornerRadius = 50;
[self.window addSubview:redBall];
[UIView animateWithDuration:.5 delay:0
options:UIViewAnimationOptionCurveEaseInOut animations:^{
redBall.transform = CGAffineTransformMakeScale(2.0, 2.0);
} completion:NULL];
這個UIView上稱為 +animateWithDuration:delay:options:animations:completion: 的類方法時UIView提供的多種動畫方法之一赶站。第一個安排，持續(xù)時間（duration）纺念，被設(shè)為半秒贝椿，第二個安排，延遲（delay）陷谱，被設(shè)為0烙博。
選項(xiàng)（options）參數(shù)讓我們設(shè)置想要使用的動畫類型（它還允許你設(shè)置一大串其他選項(xiàng)例如在動畫完成后自動反轉(zhuǎn)），所以這個簡單的測試中我們選擇UIViewAnimationOptionCurveEaseInOut來將時間設(shè)為簡單的淡入淡出時間曲線叭首。其他的時間曲線選項(xiàng)還有線性习勤、淡入和淡出踪栋。
接下來焙格，動畫（animations）安排使用了一個block代碼作為值，在block中你可以設(shè)置你要動畫的視圖的最終狀態(tài)夷都。Core Animation會自動在球的當(dāng)前尺寸值和你的最終值之間更改來產(chǎn)生一個平滑的動畫眷唉。這一次，我希望動畫能最終讓球變成兩倍大囤官，所以我設(shè)置了球的transform屬性為一個新值冬阳。transform是一個表述了視圖中每個像素根據(jù)一些線性代碼應(yīng)該改變的值的矩陣。有很多方式來操作一個視圖的transform（尺寸党饮、旋轉(zhuǎn)肝陪、位置），所以蘋果提供了很多函數(shù)來改變你感興趣的值刑顺，在我們的例子中氯窍，是尺寸。將transform屬性設(shè)為`CGAffineTransformMakeScale(2.0, 2.0)意味著我們想要其他所有的值都保持不變蹲堂，除了尺寸狼讨，我們想讓尺寸變?yōu)樵瓉淼膬杀丁?/p>
最后，我們不需要在動畫完成后運(yùn)行任何代碼柒竞，所以我么你設(shè)置完成（completion）的安排為NULL政供。這里是你再次運(yùn)行代碼后會看到的樣子。GIF會回到原始的樣子但實(shí)際上球并不會朽基。
這里是Swift下同樣的代碼：
UIView.animateWithDuration(0.5, delay: 0,
options: UIViewAnimationOptions.CurveEaseInOut, animations: {
redBall.transform = CGAffineTransformMakeScale(2.0, 2.0)
}, completion: nil)
在block代碼塊中我們可以改變很多視圖相關(guān)的屬性布隔，它們會在同一個持續(xù)時間內(nèi)一起動畫。現(xiàn)在讓我們再添加一些值的改變到動畫block中來豐富你使用基于block的動畫可以操作的內(nèi)容稼虎。
UIView *redBall = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
redBall.backgroundColor = [UIColor redColor];
redBall.layer.cornerRadius = 50;
[self.window addSubview:redBall];
[UIView animateWithDuration:.5 delay:0
options:UIViewAnimationOptionCurveEaseInOut animations:^{
redBall.backgroundColor = [UIColor greenColor];
redBall.transform = CGAffineTransformConcat(
CGAffineTransformMakeScale(2.0, 2.0),
CGAffineTransformMakeTranslation(75, 0));
} completion:NULL];
在我們現(xiàn)在的動畫block中执泰，我們做了很多事情。首先渡蜻，我們將視圖的背景色從原始的紅色改成了綠色术吝。Core Animation會幫我們修改它并處理中間的顏色计济。接下來，我們改變了兩個關(guān)于視圖的transform的內(nèi)容：它的尺寸和平移排苍。平移的更改會將視圖上沦寂、下、左淘衙、右移動传藏。在我們的例子中，我們會將它右移75個像素彤守。我們使用了CGAffineTransformConcat()函數(shù)來將兩個更改操作合成了一個毯侦，這樣就可以分配一個簡單矩陣轉(zhuǎn)化給視圖。你可以手動構(gòu)建轉(zhuǎn)變矩陣來包含尺寸和平移更改到一個數(shù)據(jù)結(jié)構(gòu)中具垫，但我發(fā)現(xiàn)讓iOS來幫我們結(jié)合多個單獨(dú)的轉(zhuǎn)變到一個最終轉(zhuǎn)變會容易一些侈离。
到目前為止有意義嗎？圍繞轉(zhuǎn)變矩陣的數(shù)學(xué)有一點(diǎn)復(fù)雜和困難筝蚕，但是蘋果讓它變得親近卦碾，即使你沒有線性代數(shù)的背景。動畫一個視圖的轉(zhuǎn)變矩陣是發(fā)動動畫最有效的方式之一起宽。
查看完整合集：https://github.com/Cloudox/Motion-Design-for-iOS
