IOS中一個簡單的粒子效果實現

1、效果圖展示

2、實現思路

　　1> 首先要實現上面的效果，第一步要處理的就是一個簡單的畫板，在View上面用鼠標滑動的時候畫出線條,這個功能可使用UIBezierPath實現

　　2> 關於粒子效果的實現，可以創建一個CALayer，然后用CAReplicatorLayer進行復制layer，從而達到粒子效果

3、代碼實現

DrawView類的封裝與編寫

 

//
//  DrawView.m
//  06-粒子效果
//
//  Created by xgao on 16/11/24.
//  Copyright (c) 2016年 xgao. All rights reserved.
//

#import "DrawView.h"

// 復制的實例個數
static int _instansCount = 0;

@interface DrawView ()

@property (nonatomic, strong) UIBezierPath *path;

@property (nonatomic, weak) CALayer *dotLayer;

@property (nonatomic, weak) CAReplicatorLayer *repL;

@end

@implementation DrawView

#pragma mark - 懶加載點層
- (CALayer *)dotLayer{
    
    if (_dotLayer == nil) {
        // 創建圖層
        CALayer *layer = [CALayer layer];
        
        CGFloat wh = 10;
        layer.frame = CGRectMake(0, -1000, wh, wh);
        layer.cornerRadius = wh / 2;
        layer.backgroundColor = [UIColor blueColor].CGColor;
        // 將layer添加到CAReplicatorLayer中
        [_repL addSublayer:layer];
        
        _dotLayer = layer;
    }
    return _dotLayer;
}

- (UIBezierPath *)path{
    
    if (_path == nil) {
        _path = [UIBezierPath bezierPath];
    }
    
    return _path;
}

#pragma mark - 開始點擊調用

// 鼠標開始點擊
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    
    // 獲取touch對象
    UITouch *touch = [touches anyObject];
    // 獲取當前觸摸點
    CGPoint curP = [touch locationInView:self];
    
    // 設置起點
    [self.path moveToPoint:curP];
}

// 鼠標按住移動
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
    
    // 獲取touch對象
    UITouch *touch = [touches anyObject];
    // 獲取當前觸摸點
    CGPoint curP = [touch locationInView:self];
    
    // 添加線到某個點
    [_path addLineToPoint:curP];
    
    // 重繪
    [self setNeedsDisplay];
    
    _instansCount ++;
}


- (void)drawRect:(CGRect)rect {
    
    // 進行路徑線條的繪制
    [_path stroke];
}

#pragma mark - 開始動畫
- (void)startAnim{
    
    // 創建幀動畫
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    anim.keyPath = @"position";
    anim.path = _path.CGPath;
    anim.duration = 3;
    anim.repeatCount = MAXFLOAT;
    [self.dotLayer addAnimation:anim forKey:nil];
    
    // 注意:如果復制的子層有動畫，先添加動畫，再復制
    // 復制子層
    _repL.instanceCount = _instansCount;
    
    // 延遲圖層動畫
    _repL.instanceDelay = 0.2;
    
}

#pragma mark - 加載完xib調用，創建復制層
- (void)awakeFromNib{
    
    // 創建復制層
    CAReplicatorLayer *repL = [CAReplicatorLayer layer];
    repL.frame = self.bounds;
    [self.layer addSublayer:repL];
  
    _repL = repL;
}

#pragma mark - 重繪
- (void)reDraw{
    
    // 清空繪圖信息
    _path = nil;
    [self setNeedsDisplay];
    
    // 把圖層移除父控件，復制層也會移除。
     [_dotLayer removeFromSuperlayer];
    _dotLayer = nil;

    // 清空子層總數
    _instansCount = 0;
}
@end

 

 

 

DrawView的使用

// 點擊開始動畫
- (IBAction)startAnim:(id)sender {
    
    DrawView *view = (DrawView *)self.view;
    [view startAnim];
    
}

// 重置按鈕
- (IBAction)reDraw:(id)sender {
    
    DrawView *view = (DrawView *)self.view;
    [view reDraw];
}