效果展示

具體流程

一、封裝YDWLikeButton

• 新建一個YDWLikeButton繼承于UIButton,然后聲明一個屬性:

@property (nonatomic, strong) CAEmitterLayer *explosionLayer;- (void)awakeFromNib{[super awakeFromNib];// 設置粒子效果[self setupExplosion]; }- (instancetype)initWithFrame:(CGRect)frame{self = [super initWithFrame:frame];if (self) {[self setupExplosion];}return self; }

• 設置粒子

// 粒子CAEmitterCell * explosionCell = [CAEmitterCell emitterCell];explosionCell.name = @"explosionCell";// 透明值變化速度explosionCell.alphaSpeed = -1.f;// alphaRange透明值范圍explosionCell.alphaRange = 0.10;// 生命周期explosionCell.lifetime = 1;// 生命周期rangeexplosionCell.lifetimeRange = 0.1;// 粒子速度explosionCell.velocity = 40.f;// 粒子速度范圍explosionCell.velocityRange = 10.f;// 縮放比例explosionCell.scale = 0.08;// 縮放比例rangeexplosionCell.scaleRange = 0.02;// 粒子圖片explosionCell.contents = (id)[[UIImage imageNamed:@"spark_red"] CGImage];

• 設置發射源

// 發射源CAEmitterLayer * explosionLayer = [CAEmitterLayer layer];[self.layer addSublayer:explosionLayer];self.explosionLayer = explosionLayer;// 發射源尺寸大小self.explosionLayer.emitterSize = CGSizeMake(self.bounds.size.width + 40, self.bounds.size.height + 40);// emitterShape表示粒子從什么形狀發射出來,圓形形狀explosionLayer.emitterShape = kCAEmitterLayerCircle;// emitterMode發射模型,輪廓模式,從形狀的邊界上發射粒子explosionLayer.emitterMode = kCAEmitterLayerOutline;// renderMode:渲染模式explosionLayer.renderMode = kCAEmitterLayerOldestFirst;// 粒子cell 數組explosionLayer.emitterCells = @[explosionCell];

• 選中狀態,實現縮放

- (void)setSelected:(BOOL)selected{[super setSelected:selected];// 通過關鍵幀動畫實現縮放CAKeyframeAnimation * animation = [CAKeyframeAnimation animation];// 設置動畫路徑animation.keyPath = @"transform.scale";if (selected) {// 從沒有點擊到點擊狀態 會有爆炸的動畫效果animation.values = @[@1.5,@2.0, @0.8, @1.0];animation.duration = 0.5;// 計算關鍵幀方式animation.calculationMode = kCAAnimationCubic;// 為圖層添加動畫[self.layer addAnimation:animation forKey:nil];// 讓放大動畫先執行完畢 再執行爆炸動畫[self performSelector:@selector(startAnimation) withObject:nil afterDelay:0.25];} else {// 從點擊狀態normal狀態 無動畫效果 如果點贊之后馬上取消 那么也立馬停止動畫[self stopAnimation];} }

• 開始動畫和結束動畫

/*** 開始動畫*/ - (void)startAnimation{// 用KVC設置顆粒個數[self.explosionLayer setValue:@1000 forKeyPath:@"emitterCells.explosionCell.birthRate"];// 開始動畫self.explosionLayer.beginTime = CACurrentMediaTime();// 延遲停止動畫[self performSelector:@selector(stopAnimation) withObject:nil afterDelay:0.15]; }/*** 動畫結束*/ - (void)stopAnimation{// 用KVC設置顆粒個數[self.explosionLayer setValue:@0 forKeyPath:@"emitterCells.explosionCell.birthRate"];// 移除動畫[self.explosionLayer removeAllAnimations]; }

二、使用YDWLikeButton

YDWLikeButton * btn = [YDWLikeButton buttonWithType:UIButtonTypeCustom];btn.frame = CGRectMake(200, 150, 30, 130);[self.view addSubview:btn];[btn setImage:[UIImage imageNamed:@"dislike"] forState:UIControlStateNormal];[btn setImage:[UIImage imageNamed:@"like_orange"] forState:UIControlStateSelected];[btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];- (void)btnClick:(UIButton *)button{// 點贊if (!button.selected) {button.selected = !button.selected;NSLog(@"點贊");} else { // 取消點贊button.selected = !button.selected;NSLog(@"取消贊");} }

完整示例

• 仿QQ點贊按鈕的粒子效果

總結

以上是生活随笔為你收集整理的iOS之仿QQ点赞按钮粒子效果的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。