本文由糖炒小蝦、Benna翻譯 ，校對：sai、u0u0、iven、子龍山人

iOS 5中的UIKit粒子系統教程

Ray的話：這是第15篇、也是最后一篇《iOS 5 盛宴》中的iOS 5教程！這篇教程來自我們的新書《iOS 5 教程》中的一篇免費預覽章節。這個禮拜三我們將迎來《iOS 5 盛宴》系列的最后一次發布——來自史詩般的《iOS 5 盛宴》奉送，最后一次#ios5feast的廣播！:]

    這是篇教程由iOS教程小組成員Marin Todorov所撰寫，他是一位擁有超過12年經驗的軟件開發者，一位iOS的獨立開發者，同時他也是Touch Code Magazine的創立者。

    你可能已經看過一些粒子系統，它們被應用于很多iOS應用程序和游戲中，諸如爆炸、火特效、下雨或者下雪等。然而，你所看到的這些特效類型可能大部分出現在游戲之中，因為UIKit不提供內置的功能來創建粒子系統----直到iOS 5的出現，這種情況將有所改變，本教程將采用UIKit來制作粒子系統！

    現在，利用iOS 5你能直接在UIkit中使用粒子系統，給你的應用程序帶來很多令人興奮的視覺享受。這里有一些非常適用于使用粒子系統的例子：

•   UIKit 游戲：是的，你可以通過普通的UIKit制作游戲（有些游戲類型運作得相當好，尤其是棋牌類游戲）。現在，你可以用爆炸、煙霧等其他更引人的東西制作更好的游戲！
•   美化UI效果：當你的用戶在界面上移動一個物體時，它能留下一條煙霧痕跡，為什么不做呢？
•  令人目眩的屏幕轉場效果：何不在你的應用程序顯現下一個場景時，讓之前的場景消失在一個火球中？ 

    希望能用UIKit粒子系統做些什么，也許你已經有一些很酷的想法啦。那么，讓我們開始吧！

    在這個教程中，我們將開發一個叫“Draw with fire”的應用程序，讓你（你猜中了）在屏幕上繪制火焰。

    你將和我一起完成粒子系統的創建與設置來實現屏幕上看到的效果，讓你能將你的想法一步步實現。當這個應用完成，你就能用它繪制一個用火焰標記的漂亮的問號，就像這個：

新的粒子 API

    有兩個類在你創建粒子系統時將會需要使用，它們在QuartzCore框架中，名叫CAEmitterLayer和CAEmitterCell。

    通常的想法是你創建一個CAEmitterLayer，并將一個或多個CAEmitterCell添加到里面。接著每個單元（cell）會按它配置的樣式產生粒子。

    而且CAEmitterLayer繼承自CALayer，你能輕易地在UIKit分層的任何地方加入它！

    我想這個新的UIKit粒子系統最酷的是一個單獨的CAEmitterLayer可以支持多個CAEmitterCell。這支持你完成一些相當復雜而且很酷的效果。例如當你創建泉水時，你能擁有一個cell發射水滴，另一個cell在泉水上發射水蒸汽！

Getting Started

    打開Xcode，并從主菜單中選擇File/New/New PRoject，選擇iOS/application/Single View Application模版，點擊Next，鍵入程序名“DrawWithFire”，再鍵入DWF為前綴，選擇iphone for Device Family，確認勾選“Use automatic reference counting”(其他選擇框別選)。接著點擊Next，再點擊Create保存項目。

     選擇你的項目，再選擇DrawWithFire的target。接著打開Build Phases選項卡，展開Link Binary  With  Libraies部分，再點擊“+”按鈕，雙擊QuartzCore.framework，將Quartz繪圖功能添加到項目里面。

     我們將創建一個自定義UIView類來開始項目，這個類將有CAEmitterLayer作為它的層。事實上，完成這些非常簡單，通過重寫UIView類的+(Class)layerClass方法并返回一個CAEmitter類。相當酷哦！

     創建一個新文件，采用iOS/Cocoa Touch/Objective-C類模板，類名為DWFParticleView，繼承于UIView。

     打開DWFParticleView.m并替換為如下代碼：

#import "DWFParticleView.h"#import <QuartzCore/QuartzCore.h> @implementation DWFParticleView{    CAEmitterLayer* fireEmitter; //1} -(void)awakeFromNib{    //set ref to the layer    fireEmitter = (CAEmitterLayer*)self.layer; //2} + (Class) layerClass //3{    //configure the UIView to have emitter layer    return [CAEmitterLayer class];} @end

讓我們重溫下初始代碼：

• 我們創建一個單一的私有實例變量來控制CAEmitterLayer。
•  在awakeFromNib中，我們設置fireEmitter為這個視圖的self.layer。我們將它存儲在我們創建的fireEmitter實例變量中，因為之后我們將在這上面設置許多參數。
•  +(Class)layerClass是UIView的類方法，它告訴UIKit使用哪個類作為這個視圖的根CALayer。想要更多關于CALayer的信息，請查看CALayer教程介紹。

接下來，讓我們將視圖控制器的根視圖轉到DWFParticleView。打開DWFViewController.xib并實現如下步驟：

1、  確認Utilities工具條是可見的（在這張圖上突出的按鈕都改被按下）。

2、  選擇Interface Builder中的灰色區域——這是這個視圖控制器的根視圖。

3、  點擊Identity Inspector選項卡。

4、  在Custom Class面板，在文本框中輸入DWFParticleView。

現在，我們已經將UI全都設置好——干得好！讓我們在圖中添加一些粒子。

A Particle Examined

為了發射火焰、煙霧、瀑布或者其他什么，你將需要一份好的PNG文件來啟動你的粒子。你可以在任何圖像編輯程序中自己制作它。看看我為這個教程制作的圖片(它被放大了并置于黑色背景中，這樣你才能看清楚它的形狀)：

我的粒子文件大小是32*32像素，這是份透明的PNG文件，我僅使用有點時髦的筆刷，隨意地用白色繪制而成。對粒子來說，最好的就是使用白色，因為粒子發射器可以用我們想要的顏色對提供的圖像著色。讓粒子圖像呈半透明也是個很好的想法，如此粒子系統就能將粒子通過它們自己混合在一起（你可以通過少量不同的圖像文件理解它如何工作）。

這樣，你就能創建自己的粒子或者就使用我制作的這個，但是要確定它添加到你的Xcode項目中并命名為Particles_fire.png。

讓我們開始產生粒子吧！

是時候添加代碼讓我們的CAEmitterLayer做一些神奇的事情啦！

打開DWFParticleView.m 將如下代碼添加到awakeFromNib:中

//configure the emitter layerfireEmitter.emitterPosition = CGPointMake(50, 50);fireEmitter.emitterSize = CGSizeMake(10, 10);

上面的代碼是用來設置emitter的坐標(view的坐標系下) 和生成粒子的大小的。

然后，在awakeFromNib后面添加一個CAEmitterCell到CAEmitterLayer上,讓我們最終能在屏幕上看到粒子效果

CAEmitterCell* fire = [CAEmitterCell emitterCell];fire.birthRate = 200;fire.lifetime = 3.0;fire.lifetimeRange = 0.5;fire.color = [[UIColor colorWithRed:0.8 green:0.4 blue:0.2 alpha:0.1]   CGColor];fire.contents = (id)[[UIImage imageNamed:@"Particles_fire.png"] CGImage];[fire setName:@"fire"]; //add the cell to the layer and we're donefireEmitter.emitterCells = [NSArray arrayWithObject:fire];

 我們生成了一個cell實例，并設置了一些屬性。然后設置CAEmitterLayer中emitterCells的屬性---一個包含cells的NSArray數組。現在emitterCell們已經設置好了，CAEmitterLayer準備好發射粒子了！

剛才設置了很多CAEmitterCell的屬性，讓我們一一過下

• Birthrate(出生率)：每秒發射的粒子數量，一個好的火焰或者瀑布你最少需要幾百個粒子，所以我們設置為200
• lifetime(生命時間):一個粒子幾秒后消失，我們設置為3.0
• liftetimeRange(生命時間變化范圍)：你可以用這個東西使粒子的lifetime產生少許變化。粒子系統會隨機在這個區間中取一個lifetime出來(lifetime – lifetimeRange, lifetime + lifetimeRange) 在我們的程序中，粒子會存活2.5~3.5秒
• Color(顏色)：粒子內容的顏色，我們這里選擇橙色
• Contents(內容):用于cell的內容，一般是一個CGImage. 我們把它賦值給粒子圖像。
• Name(名稱):你可以給你的cell取一個名字，用來在之后的時間里查找和修改它的屬性。

運行程序，來測試一下我們的粒子效果！

好吧，它工作了，但是并不像我們想象的那么酷。你甚至可以毫不掩飾的承認，它看起來像一個橘黃色的斑點。

讓我們做一些小改動使粒子變得更具有動感。把這些代碼添加到setName: on the cell前面

fire.velocity = 10;fire.velocityRange = 20;fire.emissionRange = M_PI_2;   

•  velocity(速度): 粒子每秒移動的像素數. 這里我們讓cell發射的粒子向屏幕的右邊沿移動這里我們設置如下的新屬性在CAEimtterCell中：

• velocityRange(速度范圍): 速度變化范圍，和lifetimeRange相似
• emissionRange(發射角度):這是一個cell發射的角度范圍(弧度制).M_PI_2(pi/2)是45度(也就是說生成范圍會+-45度)

（編譯并運行來）檢查一下我們的成果

這次看起來好點，距離我們的目標不遠了！如果你想把這些屬性是如何影響粒子發生器理解的更透徹，那就去自由發揮吧，修改屬性值看效果。

再添加兩行，來結束cell的設置

fire.scaleSpeed = 0.3;fire.spin = 0.5;     

• ScaleSpeed(變大速度)：每秒修改粒子大小的百分比。我們設置0.3讓粒子隨著時間則推移變大 這里我們設置如下的新屬性在CAEimtterCell中

• Spin(旋轉):每個粒子的旋轉速率。我們設置0.5來給粒子一個漂亮的旋轉

再次運行：

     現在看起來有點像鐵銹色的煙，這是為什么呢？CAEmitterCell有很多屬性來調整，天空類型在這里受限制。在設置fireEmitter.emitterSize后面加這么一句話

fireEmitter.renderMode = kCAEmitterLayerAdditive;

    這一行代碼用于讓我們鐵銹色的煙變成沸騰的火球，運行來查看效果

    發生了什么？遞增渲染模式(additive render mode)基本上是告訴系統不要用普通的方式——一個蓋住一個的繪制粒子，而是換了一種更酷的方法：如果粒子相互重疊的話他們的顏色強度會增加！所以，你會在粒子發生器的區域里面看到大量的白色亮斑，但在區域外是火球，那里因為粒子不斷消亡而數量減少，色彩漸變到原來的鐵銹色。太棒了！

     你現在可能會覺得火焰非常不真實。的確，你可以通過修改cell的屬性讓火焰的效果更好。但是我們需要這么厚的效果，因為我們要去繪制它。當你在設備屏幕上拖動手指的時候，屏幕上會收到相對少的觸摸點，所以我們用厚重的火球來補償他。

玩兒火吧！

    現在，你終于可以玩火了（在現實生活中我們被告知永遠不要玩火）:]

    下面來實現用手指在屏幕上畫火焰，我們需要通過用戶觸摸點來修改粒子發生器的位置

    首先在DWFParticleView.h中聲明一個方法:

-(void)setEmitterPositionFromTouch: (UITouch*)t;

然后在DWFParticleView.m中實現它

-(void)setEmitterPositionFromTouch: (UITouch*)t{    //change the emitter's position    fireEmitter.emitterPosition = [t locationInView:self];}

     這個方法獲得一個觸摸點并作為實參， 將觸摸點信息轉移到ParticleView的坐標系中，并修改粒子發生器的坐標

我們需要在view controller中控制它，所以我們下一步是在viewController中定義接口

#import <UIKit/UIKit.h>#import "DWFParticleView.h" @interface DWFViewController : UIViewController{    IBOutlet DWFParticleView* fireView;}@end

之后打開DWFViewController.xib 然后按住control從File’s Owner向root view拖動，在彈出的選項卡中選擇fireView正如你所見，我們import了我們的自定義view類，并且在DWFParticleView中定義了實例變量。

現在我們能通過view controller 訪問emitter 層。打開DWFViewController.m 刪掉所有自動生成的代碼，添加如下代碼

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {    [fireView setEmitterPositionFromTouch: [touches anyObject]];}

試著用更快或者更慢的速度拖動它，來看對粒子產生所造成的影響運行，觸摸并向四周拖動，你會看到粒子發生器跟著移動并留下一串很酷的火焰

動態修改Cell

今天最后的話題是在emitter 層動態的改動cell們。現在，粒子發生器一直在產生粒子。沒能給用戶一種是他們畫上去的感覺,讓我們來將粒子發生的條件改為僅當手指觸摸到屏幕的時候產生粒子.那么一開始就不要產生了，于是將DWFParticleView.m的awakeFromNib method方法中 粒子的birthrate設為0

fire.birthRate = 0;

如果你現在運行的話，會發現屏幕空空如也，很好！下面添加一個方法來作為粒子發生（發射）器的開關。首先在DWFParticeView的頭文件中定義如下方法

-(void)setIsEmitting:(BOOL)isEmitting;

然后在DWFParticleView.m實現它

-(void)setIsEmitting:(BOOL)isEmitting{    //turn on/off the emitting of particles    [fireEmitter setValue:[NSNumber numberWithInt:isEmitting?200:0]       forKeyPath:@"emitterCells.fire.birthRate"];}

 這里使用setValue:forKeyPath:方法來改動一個cell, 是因為我們早先將cell的名字添加到了emitter中。我們使用”emitterCells.fire.birthRate”做keypath是因為birthRate是emitterCells數組中一個叫做叫fire的cells的屬性。

最后我們需要在觸摸開始的時候打開粒子發生器的開關，在抬起手指的時候關掉它。在DWFViewController

中添加如下代碼

 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {    [fireView setEmitterPositionFromTouch: [touches anyObject]];    [fireView setIsEmitting:YES];} - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {    [fireView setIsEmitting:NO];} - (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event {    [fireView setIsEmitting:NO];}

完成并運行~觀察效果咯~記住，你在玩兒火:-）

Where To Go From Here?

這里是樣例工程的全部代碼。

如果你喜歡這個教程，這里有更多你可以研究的東西。你可以

• 實驗不同的粒子圖片
• 去CAEmitterCell的官方文檔中看看它全部的屬性們
• 添加一個函數，將屏幕上的圖片渲染保存到圖片中
• 將繪制過程保存到視頻文件中
• 在你的所有應用的文本框的后面添加燃燒的火焰作為背景。

以上內容是轉載別人的，這里是我自己實現的粒子效果Demo，下載下來就可以跑啦。下載地址：TestFire.zip