iOS 煙花撒花效果，圖層漸層，圖層倒影特效。CAEmitterLayer粒子發射器

iOS 煙花撒花效果，圖層漸層，圖層倒影特效。CAEmitterLayer粒子發射器
iOS 煙花撒花效果，圖層漸層，圖層倒影特效。CAEmitterLayer粒子發射器

上一節我寫了一個關於視圖圖層的相關類，有關CALayer這個類的使用和一些用法，就是我們在處理視圖的時候要對他的圖層來進行修改，需要注意的幾個地方，還有錨點的介紹，然後這篇主要說一個利用CALayer裡面的一個類來實現一個煙花的特效。

這個就是利用了CAEmitterLayer粒子發射器圖層來製作的一個效果，這個動態工具也是下面的朋友推薦的，效果很好很不錯mac版地址，就是通過一個發射點來發射一些粒子(cell)的效果。
可以通過這個圖層來“發射”一些cell，而且可以添加不同的cell，設定方向，速度等等，他也是一個繼承於CALayer的一個子類，都是對視圖的圖層做一些處理，內建動畫效果，不多說上代碼。

 @interface ViewController () @property (nonatomic ,strong)CAEmitterLayer *emitterLayer; @end - (CAEmitterLayer *)emitterLayer{      if (_emitterLayer) {         return _emitterLayer;     }      _emitterLayer = [[CAEmitterLayer alloc]init];      [self.view.layer addSublayer:_emitterLayer]; //    _emitterLayer.position = CGPointMake(200, 200);     return _emitterLayer;  }

初始一個粒子發射器對象，添加到父視圖上面。

 //使他的中心點為父視圖的中心點，   self.emitterLayer.emitterPosition = self.view.center;   self.view.backgroundColor = [UIColor blackColor]; //先設定粒子發送器的屬性 //設定粒子發送器每秒鐘發送粒子數量self.emitterLayer.birthRate = 2;//設定粒子發送器的樣式self.emitterLayer.renderMode = kCAEmitterLayerAdditive;  //初始化要發射的cell CAEmitterCell *cell = [CAEmitterCell emitterCell]; //contents:粒子的內容  cell.contents = (id)[UIImage imageNamed:@"星星"].CGImage;//他所需要物件類型的和圖層類似 //接著設定cell的屬性  //    粒子的出生量cell.birthRate = 2;  //    存活時間cell.lifetime = 3;cell.lifetimeRange = 1;   //    設定粒子發送速度   cell.velocity = 50;cell.velocityRange = 30;   //    粒子發送的方向cell.emissionLatitude = 90*M_PI/180;  //    發送粒子的加速度cell.yAcceleration = -100;  //    散發粒子的範圍  ->  弧度cell.emissionRange = 180*M_PI/180;//最後把粒子的cell添加到粒子發送器  數組內可以添加多個cell對象self.emitterLayer.emitterCells = @[cell];

它會自動給我們產生粒子(圖層)然後通過我們給它的屬性自動添加效果，發射的粒子並非是View，而只是圖層上面的一個顯示層。

然後介紹一下發射器和cell的一些屬性

1.粒子發送器圖層
- CAEmitterLayer:發送器
- 每秒發送粒子數量:birthRate

發送形狀的樣式:emitterShape

 -  CA_EXTERN NSString * const kCAEmitterLayerPoint  點 -  CA_EXTERN NSString * const kCAEmitterLayerLine   線 -  CA_EXTERN NSString * const kCAEmitterLayerRectangle  舉行 -  CA_EXTERN NSString * const kCAEmitterLayerCuboid 立方體 -  CA_EXTERN NSString * const kCAEmitterLayerCircle 曲線 -  CA_EXTERN NSString * const kCAEmitterLayerSphere 圓形

發送的樣式:emitterMode //120行開始

-  CA_EXTERN NSString * const kCAEmitterLayerPoints以點的方式  預設樣式-   CA_EXTERN NSString * const kCAEmitterLayerOutline線的樣式-   CA_EXTERN NSString * const kCAEmitterLayerSurface  以面的形式-   CA_EXTERN NSString * const kCAEmitterLayerVolume    以團的樣式

粒子出現的樣式:renderMode//點進去第129行開始

    -   CA_EXTERN NSString * const kCAEmitterLayerOldestFirst最後一個出生的粒子在第一個    -   CA_EXTERN NSString * const kCAEmitterLayerOldestLast最後出生的就在最後一個    -   CA_EXTERN NSString * const kCAEmitterLayerBackToFront把後面的放到上面    -   CA_EXTERN NSString * const kCAEmitterLayerAdditive疊加效果

在粒子發送器上面添加粒子:emitterCells

cell的一些屬性

表示粒子的是:CAEmitterCell 他不是一個Layer contents:粒子的內容 lifetime:存活時間 lifetimeRange:存活時間的範圍 birthRate:每秒的粒子產生的數量 emissionLatitude:散發的維度 他表示的是一個弧度 上下 emissionLongitude:散發的經度 ->弧度 ->左右 velocity:發送的速度 速度越快發送的越遠->動力 velocityRange:發送速度的範圍 xAcceleration; x，y，z軸的加速度 慣性 動力 yAcceleration; zAcceleration; emissionRange:散發的範圍 ->弧度 ->範圍 name:粒子的名字 可以通過名字 找到粒子

然後我們把它在加一個cell設定不同的屬性

 CAEmitterCell *cell2 = [CAEmitterCell emitterCell];     cell2.contents = (id)[UIImage imageNamed:@"點"].CGImage;//    粒子的出生量cell2.birthRate = 4;//    存活時間cell2.lifetime = 3;cell2.lifetimeRange = 1;//    設定粒子發送速度cell2.velocity = 80;cell2.velocityRange = 50;//    粒子發送的方向cell2.emissionLatitude = 90*M_PI/180;//    發送粒子的加速度cell2.yAcceleration = -100;//    散發粒子的範圍  ->  弧度cell2.emissionRange = 180*M_PI/180;//把粒子的cell添加到粒子發送器//重新設定cell的emitterCellsself.emitterLayer.emitterCells = @[cell,cell2];

為了效果我吧小紅點的出生量和初始速度設定了大了一些，在加速度相同的情況下，散發範圍相同，初始速度越大所以cell2的位移量也會大一些。發射器的渲染效果等可以自己試一下不同的樣式有什麼不同。

然後是一個圖層漸層的效果

2.漸層顏色
CAGradientLayer

可以看到這個圖層的顏色是由3種顏色的漸層色組成的，越到中心，顏色越重，越靠近邊緣顏色越淡，作為背景的效果很不錯，在這裡用到的也是CALayer的一個子類CAGradientLayer<喎?http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;"> CAGradientLayer *layer = [CAGradientLayer layer];layer.frame = self.view.frame; //設定顏色數組layer.colors = @[(id)[UIColor colorWithRed:1.000 green:0.377 blue:0.624 alpha:1.000].CGColor, (id)[UIColor colorWithRed:0.597 green:1.000 blue:0.657 alpha:1.000].CGColor,(id)[UIColor colorWithRed:0.649 green:0.729 blue:1.000 alpha:1.000].CGColor];

在這裡我設定了3個顏色，讓它在這三個顏色中做一個漸層的效果。所有layer的屬性他都可以使用

 //    layer.opacity = 0.7;//設定透明度可以看到背景的圖片，看上去就像一層濾鏡 //漸層的起始點layer.startPoint = CGPointMake(0, 0); //終止點layer.endPoint = CGPointMake(1, 1); //漸層的區間      顏色所在的比例，第一個在十分之二的位置，第二個在十分之五的位置，第三個在十分之八的位置//    layer.locations = @[0.2,0.5,0.8];[self.view.layer addSublayer:layer];

當我設定了他的起始點為左上方，終止點為右下角的時候，他就變成了這樣的一個效果。這個效果作為處理圖層的效果很不錯，有相當於濾鏡的效果，不過兩者還是有不同，濾鏡是給圖片增加特效，這個是給圖層增加特效。

這個類只有這麼多屬性，使用起來也比較簡單，效果也很不錯。

在接下來說一個倒影的效果，類似鏡像的特效

3.複製圖層CAReplicatorLayer

複製圖層的意思就是把這個圖層拷貝一份然後給他增加效果，做一些transform的改變

複製圖層重要的一點，如果要使用複製圖層，必須重寫視圖 layerClass 把原有的CALayer修改成CAReplicatorLayer

就是說要使用CAReplicatorLayer的視圖必須重寫它的layerClass方法才能使用CAReplicatorLayer複製圖層。

先看一下效果

可以看到它就是原圖層的一個鏡像，顏色什麼的相對淡了一些，當然這都是我們給它的鏡像(複製)的一些效果。接下來看是怎麼使用的。

1.重寫視圖的layerClass方法
????????????
首先我們建立一個UIView的類，重寫他的方法，第一步非常重要，如果不重寫這個方法，視圖的初始化都不會有效果。

首先自訂一個類，就先命名為CanReplicatorView，繼承與UIView

然後重寫他的方法，在.M裡面

  //只有這一步才能複製視圖上面的layer   //要想賦值視圖的圖層就必須重寫這個視圖的layerClass   + (Class)layerClass{      return [CAReplicatorLayer class];  }

2.初始化視圖

CanReplicatorView *repView = [[CanReplicatorView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];

//寫一個我們要顯示圖片的視圖添加上去
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 200, 200)];
imageView.contentMode = UIViewContentModeScaleAspectFit;
imageView.image = [UIImage imageNamed:@”屠龍刀”];

3.初始化複製圖層

CAReplicatorLayer layer = (CAReplicatorLayer )repView.layer;

//給複製圖層定義屬性
//instanceCount layer的執行個體化數量 必須明確複製幾份
layer.instanceCount = 2;//寫個2就複製出來了1份，加上原圖一共有2份了

4.給複製視圖設定transform值

//instanceTransform表示複製圖層的樣式 Transform是原視圖的樣式
//定義一個讓視圖向下平移400的transform值
CATransform3D transform = CATransform3DMakeTranslation(0, 400, 0);
//讓視圖向下便宜400並旋轉180度，成倒影狀
layer.instanceTransform = CATransform3DRotate(transform, 180*M_PI/180, 1, 0, 0);

// 還可以設定顏色的位移量 透明度等
layer.instanceRedOffset = -0.2;//紅色位移量
layer.instanceBlueOffset = -0.2;//藍色
layer.instanceGreenOffset = -0.2;//綠色
layer.instanceAlphaOffset = -0.4;//透明度位移量

5.添加視圖
[self.view addSubview:repView];
//把顯示圖片的視圖添加到我們的可以使用複製圖層的視圖上
[repView addSubview:imageView];

通過這三個效果可以讓視圖有各種效果，我們改變的只是圖層，並非視圖的屬性，給他們的圖層添加了一些特效，在使用的時候讓視圖更加美觀，也是iOS裡面內建的一些處理效果。