最近寫了個(gè)點(diǎn)贊功能，覺得如果點(diǎn)贊與取消點(diǎn)贊只是更換一下按鈕圖片袋哼，太簡(jiǎn)單冀墨，不夠酷炫。涛贯。诽嘉。就想起了粒子效果引擎，有了想法就嗨起來(lái)弟翘！
點(diǎn)贊.gif
① 粒子發(fā)射器
iOS中的粒子效果有兩部分組成虫腋，一部分為發(fā)射器，設(shè)置例子發(fā)射的宏觀屬性稀余，另一部分是粒子單元悦冀，用于設(shè)置相應(yīng)的粒子屬性。粒子發(fā)射器CAEmitterLayer基于Layer層睛琳，其中常用的屬性如下：
@property(copy) NSArray *emitterCells;//粒子單元數(shù)組
@property float birthRate;//粒子的創(chuàng)建速率盒蟆，默認(rèn)為1/s
@property float lifetime;//粒子的存活時(shí)間，默認(rèn)為1S
@property CGPoint emitterPosition;//發(fā)射器在xy平面的中心位置
@property CGFloat emitterZPosition;//發(fā)射器在Z平面的位置
@property CGSize emitterSize;//發(fā)射器的尺寸大小
@property CGFloat emitterDepth;//發(fā)射器的深度师骗，在某些模式下會(huì)產(chǎn)生立體效果
@property(copy) NSString *emitterShape;//發(fā)射器的形狀
@property(copy) NSString *emitterMode;//發(fā)射器的發(fā)射模式
@property(copy) NSString *renderMode;//發(fā)射器渲染模式
@property BOOL preservesDepth;//是否開啟三維空間效果
@property float velocity;//粒子的運(yùn)動(dòng)速度
@property float scale;//粒子的縮放大小
@property float spin;//粒子的旋轉(zhuǎn)位置
@property unsigned int seed;//初始化隨機(jī)的粒子種子
② 粒子單元
設(shè)置好了粒子發(fā)射器茁影，我們還需要初始化一些粒子單元CAEmitterCell，設(shè)置具體粒子的屬性丧凤。常用的屬性如下：
+ (instancetype)emitterCell;//類方法創(chuàng)建發(fā)射單元
@property(copy) NSString *name;//設(shè)置發(fā)射單元的名稱
@property(getter=isEnabled) BOOL enabled;//是否允許發(fā)射器渲染
@property float birthRate;//粒子的創(chuàng)建速率
@property float lifetime;//粒子的生存時(shí)間
@property float lifetimeRange;//粒子的生存時(shí)間容差
@property CGFloat emissionLatitude;//粒子在Z軸方向的發(fā)射角度
@property CGFloat emissionLongitude;//粒子在xy平面的發(fā)射角度
@property CGFloat emissionRange;//粒子發(fā)射角度的容差
@property CGFloat velocity;//粒子的速度
@property CGFloat velocityRange;//粒子速度的容差
@property CGFloat xAcceleration;//x方向的加速度
@property CGFloat yAcceleration;//y方向的加速度
@property CGFloat zAcceleration;//z方向的加速度
@property CGFloat scale;//縮放大小
@property CGFloat scaleRange;//縮放容差
@property CGFloat scaleSpeed;//縮放速度
@property CGFloat spin;//旋轉(zhuǎn)度
@property CGFloat spinRange;//旋轉(zhuǎn)容差
@property CGColorRef color;//粒子的顏色
@property float redRange;
@property float greenRange;
@property float blueRange;
@property float alphaRange;//粒子在rgb三個(gè)色相上的容差和透明度的容差
@property float redSpeed;
@property float greenSpeed;
@property float blueSpeed;
@property float alphaSpeed;//粒子在RGB三個(gè)色相上的變化速度和透明度的變化速度
@property(strong) id contents;//渲染粒子募闲，可以設(shè)置為一個(gè)CGImage的對(duì)象
@property CGRect contentsRect;//渲染的范圍
③ 下面是我利用粒子效果做的點(diǎn)贊動(dòng)畫效果。自定義按鈕PraiseBtn：
PraiseBtn.h文件
#import <UIKit/UIKit.h>
@interface PraiseBtn : UIButton
- (void)setButtonSelected:(BOOL)selected;
@end
PraiseBtn.m文件
#import "PraiseBtn.h"
@interface PraiseBtn ()
@property (nonatomic , strong) CAEmitterLayer * explosionLayer;
@property (nonatomic , assign) BOOL isPraise;
@end
@implementation PraiseBtn
- (instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
[self setupExplosion];
}
return self;
}
- (void)setupExplosion{
_explosionLayer = [CAEmitterLayer layer];
CAEmitterCell *explosionCell = [[CAEmitterCell alloc]init];
explosionCell.name = @"explosion";
// 設(shè)置粒子顏色alpha能改變的范圍
explosionCell.alphaRange = 0.10;
// 粒子alpha的改變速度
explosionCell.alphaSpeed = -1.0;
// 粒子的生命周期
explosionCell.lifetime = 0.7;
// 粒子生命周期的范圍;
explosionCell.lifetimeRange = 0.3;
// 粒子發(fā)射的初始速度
explosionCell.birthRate = 2500;
// 粒子的速度
explosionCell.velocity = 40.00;
// 粒子速度范圍
explosionCell.velocityRange = 10.00;
// 粒子的縮放比例
explosionCell.scale = 0.03;
// 縮放比例范圍
explosionCell.scaleRange = 0.02;
// 粒子要展現(xiàn)的圖片
explosionCell.contents = (id)([[UIImage imageNamed:@"sparkle"] CGImage]);
_explosionLayer.name = @"explosionLayer";
// 發(fā)射源的形狀
_explosionLayer.emitterShape = kCAEmitterLayerSphere;
// 發(fā)射模式
_explosionLayer.emitterMode = kCAEmitterLayerOutline;
// 發(fā)射源大小
_explosionLayer.emitterSize = CGSizeMake(5, 0);
// 發(fā)射源包含的粒子
_explosionLayer.emitterCells = @[explosionCell];
// 渲染模式
_explosionLayer.renderMode = kCAEmitterLayerOldestFirst;
_explosionLayer.masksToBounds = false;
_explosionLayer.birthRate = 0;
_explosionLayer.zPosition = 0;
[self.layer addSublayer:_explosionLayer];
}
- (void)layoutSubviews{
[super layoutSubviews];
// 發(fā)射位置
_explosionLayer.position = CGPointMake(self.frame.size.width/2, self.frame.size.height/2);
}
- (void)setButtonSelected:(BOOL)selected{
CAKeyframeAnimation * animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
if (selected) {
animation.values = @[@1.5,@0.8,@1.0,@1.2,@1.0];
animation.duration = 0.5;
[self startAnimation];
}else{
animation.values = @[@0.8,@1.0];
animation.duration = 0.4;
}
animation.calculationMode = kCAAnimationCubic;
[self.layer addAnimation:animation forKey:@"transform.scale"];
}
- (void)startAnimation{
_explosionLayer.beginTime = CACurrentMediaTime();
//每秒生成多少個(gè)粒子
_explosionLayer.birthRate = 1;
// perform(#selector(STPraiseEmitterBtn.stopAnimation), with: nil, afterDelay: 0.15);
[self performSelector:@selector(stopAnimation) withObject:self afterDelay:0.15];
}
- (void)stopAnimation{
_explosionLayer.birthRate = 0;
}
@end
在視圖控制器中創(chuàng)建PraiseBtn對(duì)象并添加到視圖上：
PraiseBtn *praise = [PraiseBtn buttonWithType:UIButtonTypeCustom];
[self.view addSubview:praise];
[praise setImage:[UIImage imageNamed:@"praise_default"] forState:UIControlStateNormal];
praise.frame = CGRectMake(100, 100, 30, 30);
[praise addTarget:self action:@selector(onButtonClick:) forControlEvents:UIControlEventTouchUpInside];
給PraiseBtn對(duì)象綁定的點(diǎn)擊方法：
- (void)onButtonClick:(UIButton *)btn{
PraiseBtn *praise=(PraiseBtn *)btn;
praise.selected=!praise.selected;
[praise setButtonSelected:praise.selected];
if (praise.selected) {
[praise setImage:[UIImage imageNamed:@"praise_select"] forState:UIControlStateNormal];
}else{
[praise setImage:[UIImage imageNamed:@"praise_default"] forState:UIControlStateNormal];
}
}
點(diǎn)贊時(shí)有粒子效果如下：
點(diǎn)贊.png
取消點(diǎn)贊沒有粒子效果：
取消點(diǎn)贊.png
應(yīng)用粒子效果可以做很多酷炫的動(dòng)畫愿待，例如煙花浩螺、火焰等等靴患，感興趣可以嘗試一下。
