iOS動畫開發之五——炫酷的粒子效果

iOS動畫開發之五——炫酷的粒子效果

        在上幾篇博客中，咱們對UIView層的動畫以及iOS的核心動畫作了介紹，基本已經能夠知足iOS應用項目中全部的動畫需求，若是你以爲那些都還不夠炫酷，亦或是你靈光一現，想用UIKit框架寫出一款炫酷的休閒遊戲，那個有一個東西能夠幫到你：iOS的粒子效果引擎。

1、粒子發射器

        iOS中的粒子效果有兩部分組成，一部分爲發射器，設置例子發射的宏觀屬性，另外一部分是粒子單元，用於設置相應的粒子屬性。粒子發射器是基於Layer層，沒錯，又是Layer，他的全名叫作：

CAEmitterLayer。其中經常使用的屬性以下：

        

@property(copy) NSArray *emitterCells;

    粒子單元數組，例如你在繪製火焰的效果時，你能夠建立兩個單元，一個單元負責煙霧，一個單元負責火苗。

 

@property float birthRate;

    粒子的建立速率，默認爲1/s。

 

@property float lifetime;

    粒子的存活時間。默認爲1S。

 

@property CGPoint emitterPosition;

    發射器在xy平面的中心位置

@property CGFloat emitterZPosition;

    發射器在Z平面的位置

 

@property CGSize emitterSize;

    發射器的尺寸大小

 

@property CGFloat emitterDepth;

    發射器的深度，在某些模式下會產生立體效果

 

@property(copy) NSString *emitterShape;

    發射器的形狀，這個參數的幾個系統字符串以下：

CA_EXTERN NSString * const kCAEmitterLayerPoint
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0); //點的形狀，粒子從一個點發出
CA_EXTERN NSString * const kCAEmitterLayerLine
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//線的形狀，粒子從一條線發出
CA_EXTERN NSString * const kCAEmitterLayerRectangle
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//矩形形狀，粒子從一個矩形中發出
CA_EXTERN NSString * const kCAEmitterLayerCuboid
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//立方體形狀，會影響Z平面的效果
CA_EXTERN NSString * const kCAEmitterLayerCircle
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//圓形，粒子會在圓形範圍發射
CA_EXTERN NSString * const kCAEmitterLayerSphere
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//球型

 

@property(copy) NSString *emitterMode;

    發射器的發射模式，參數以下：

CA_EXTERN NSString * const kCAEmitterLayerPoints
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//從發射器中發出
CA_EXTERN NSString * const kCAEmitterLayerOutline
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//從發射器邊緣發出
CA_EXTERN NSString * const kCAEmitterLayerSurface
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//從發射器表面發出
CA_EXTERN NSString * const kCAEmitterLayerVolume
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//從發射器中點發出

 

@property(copy) NSString *renderMode;

    發射器渲染模式，參數以下：

CA_EXTERN NSString * const kCAEmitterLayerUnordered
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//這種模式下，粒子是無序出現的，多個發射源將混合
CA_EXTERN NSString * const kCAEmitterLayerOldestFirst
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//這種模式下，聲明久的粒子會被渲染在最上層
CA_EXTERN NSString * const kCAEmitterLayerOldestLast
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//這種模式下，年輕的粒子會被渲染在最上層
CA_EXTERN NSString * const kCAEmitterLayerBackToFront
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//這種模式下，粒子的渲染按照Z軸的先後順序進行
CA_EXTERN NSString * const kCAEmitterLayerAdditive
    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_5_0);//這種模式會進行粒子混合

 

@property BOOL preservesDepth;

    是否開啓三維空間效果

 

@property float velocity;

    粒子的運動速度

 

@property float scale;

    粒子的縮放大小

 

@property float spin;

    粒子的旋轉位置

 

@property unsigned int seed;

    初始化隨機的粒子種子

2、粒子單元

        設置好了粒子發射器，咱們還須要初始化一些粒子單元，設置具體粒子的屬性，咱們使用到的類是CAEmitterCell這個類。

 

+ (instancetype)emitterCell;

類方法建立發射單元

 

@property(copy) NSString *name;

設置發射單元的名稱

 

@property(getter=isEnabled) BOOL enabled;

是否容許發射器渲染

 

@property float birthRate;

粒子的建立速率

 

@property float lifetime;

粒子的生存時間

 

@property float lifetimeRange;

粒子的生存時間容差

 

@property CGFloat emissionLatitude;

粒子在Z軸方向的發射角度

 

@property CGFloat emissionLongitude;

粒子在xy平面的發射角度

 

@property CGFloat emissionRange;

粒子發射角度的容差

 

@property CGFloat velocity;

粒子的速度

 

@property CGFloat velocityRange;

粒子速度的容差

 

@property CGFloat xAcceleration;

@property CGFloat yAcceleration;

@property CGFloat zAcceleration;

x，y，z三個方向的加速度

 

@property CGFloat scale;

@property CGFloat scaleRange;

@property CGFloat scaleSpeed;

縮放大小，縮放容差和縮放速度

 

@property CGFloat spin;

@property CGFloat spinRange;

旋轉度與旋轉容差

@property CGColorRef color;

粒子的顏色

 

@property float redRange;

@property float greenRange;

@property float blueRange;

@property float alphaRange;

粒子在rgb三個色相上的容差和透明度的容差

@property float redSpeed;

@property float greenSpeed;

@property float blueSpeed;

@property float alphaSpeed;

粒子在RGB三個色相上的變化速度和透明度的變化速度

 

@property(strong) id contents;

渲染粒子，能夠設置爲一個CGImage的對象

 

@property CGRect contentsRect;

渲染的範圍

3、讓咱們來「火」一把

        經過上面的介紹，咱們來應用這些創造一團火，代碼示例以下：

@interface ViewController ()
{
    CAEmitterLayer * _fireEmitter;//發射器對象
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.view.backgroundColor=[UIColor blackColor];
    //設置發射器
    _fireEmitter=[[CAEmitterLayer alloc]init];
    _fireEmitter.emitterPosition=CGPointMake(self.view.frame.size.width/2,self.view.frame.size.height-20);
    _fireEmitter.emitterSize=CGSizeMake(self.view.frame.size.width-100, 20);
    _fireEmitter.renderMode = kCAEmitterLayerAdditive;
    //發射單元
    //火焰
    CAEmitterCell * fire = [CAEmitterCell emitterCell];
    fire.birthRate=800;
    fire.lifetime=2.0;
    fire.lifetimeRange=1.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"];
    
    fire.velocity=160;
    fire.velocityRange=80;
    fire.emissionLongitude=M_PI+M_PI_2;
    fire.emissionRange=M_PI_2;
    
    
    
    fire.scaleSpeed=0.3;
    fire.spin=0.2;
    
    //煙霧
    CAEmitterCell * smoke = [CAEmitterCell emitterCell];
    smoke.birthRate=400;
    smoke.lifetime=3.0;
    smoke.lifetimeRange=1.5;
    smoke.color=[[UIColor colorWithRed:1 green:1 blue:1 alpha:0.05]CGColor];
    smoke.contents=(id)[[UIImage imageNamed:@"Particles_fire.png"]CGImage];
    [fire setName:@"smoke"];
    
    smoke.velocity=250;
    smoke.velocityRange=100;
    smoke.emissionLongitude=M_PI+M_PI_2;
    smoke.emissionRange=M_PI_2;
    
    _fireEmitter.emitterCells=[NSArray arrayWithObjects:smoke,fire,nil];
    [self.view.layer addSublayer:_fireEmitter];
                
}

效果以下：

看到效果了麼？此次夠炫酷了吧，改改其它屬性，盡情的玩吧！

專一技術，熱愛生活，交流技術，也作朋友。

——琿少 QQ羣：203317592