iOS-粒子效果

一.storyboard裏面如下:

二.自定義VCView

//  VCView.h

#import <UIKit/UIKit.h>

@interface VCView : UIView

//開始動畫
- (void)start;
//重繪
- (void)redraw;

@end

//  VCView.m

#import "VCView.h"

@interface VCView()

/** 當前繪製的路徑 */
@property (nonatomic, strong)  UIBezierPath *path ;


/** 當前 的粒子 */
@property (nonatomic, weak) CALayer *dotLayer;
@end

@implementation VCView

+(Class)layerClass {
    
    return [CAReplicatorLayer class];
}

-(void)awakeFromNib {
    
    //添加手勢
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
    [self addGestureRecognizer:pan];
    
    
    
    //添加粒子
    CALayer *dotLayer = [CALayer layer];
    dotLayer.frame = CGRectMake(-20, 0, 20, 20);
    dotLayer.backgroundColor = [UIColor redColor].CGColor;
    [self.layer addSublayer:dotLayer];
    self.dotLayer = dotLayer;
    
    
    CAReplicatorLayer *repL = (CAReplicatorLayer *)self.layer;
    repL.instanceCount = 30;
    
    //設置動畫 的延時執行時長
    repL.instanceDelay = 0.5;
    
    
    
    //創建路徑,設置起點
    UIBezierPath *path = [UIBezierPath bezierPath];
    self.path = path;
    
}



- (void)pan:(UIPanGestureRecognizer *)pan {
    
    //獲取當前點
    CGPoint curP = [pan locationInView:self];
    if (pan.state == UIGestureRecognizerStateBegan) {
        
        [self.path moveToPoint:curP];
        
    }else if(pan.state == UIGestureRecognizerStateChanged) {
        
        //添加一根線到當前的點
        [self.path addLineToPoint:curP];
        //重繪
        [self setNeedsDisplay];
        
    }
    
}


//開始動畫
- (void)start {

    CAKeyframeAnimation *anim = [CAKeyframeAnimation  animation];
    anim.keyPath = @"position";
    anim.path = self.path.CGPath;
    anim.repeatCount = MAXFLOAT;
    anim.duration = 5;
    
    [self.dotLayer addAnimation:anim forKey:nil];
    
}

//重繪
- (void)redraw {
    
    //刪除動畫
    [self.dotLayer removeAllAnimations];
    //刪除路徑
    [self.path removeAllPoints];
    //重會
    [self setNeedsDisplay];

}


- (void)drawRect:(CGRect)rect {
    //繪製路徑
    [self.path stroke];
    
}

@end

三.控制器.m文件如下:

//  ViewController.m

#import "ViewController.h"
#import "VCView.h"

@interface ViewController ()
@property (strong, nonatomic) IBOutlet VCView *vcView;

@end

@implementation ViewController

- (IBAction)start:(id)sender {
    
    [self.vcView start];
}
- (IBAction)redraw:(id)sender {
    [self.vcView redraw];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // Do any additional setup after loading the view, typically from a nib.
}


@end

效果圖如下:

筆記:

整體思路:
指在屏幕上移動時,繪製出 條路徑.路徑上 可以有多條線.當點擊開始繪製時,很多粒

根據繪製的路徑開始移動.創建 個粒 添加到控制器的View,開始時讓粒 的x座標負的.在界 上看不到粒 .讓控制器的View成爲 個畫板. 指在上 繪製,使能夠繪製多條線.繪製完畢後,添加 個

幀動畫,
把畫板上繪製的路徑當作是幀動畫的路徑.把幀動畫添加給創建的粒,使粒 能夠根據

路徑做移動的動畫.把當前的View的layer設置成爲複製層,把粒 的份數設置30份,每個再設置 個延時動畫,

就會有 個個粒 移動的效果了

實現 式:1.創建路徑,使控制器的View能夠實現繪製多條線的功能.

保證要只有 條路徑.所以路徑只需要創建 份,在awakeFromNib 法中創建路徑.添加完 勢,判斷 勢的狀態,每次開始移動的時,讓路徑重新設置起點. 指移動的時候,添加 根線到當前 指所在的點.

實現代碼爲:獲取當前 指所在的點.

CGPoint curP = [pan locationInView:self];
if (pan.state == UIGestureRecognizerStateBegan) {

[self.path moveToPoint:curP];}else{

[self.path addLineToPoint:curP];

[self setNeedsDisplay];}

2.添加粒每 個粒 使 個層來做.開始時讓粒 的x值爲負的.創建粒
CALayer *dotLayer = [CALayer layer];
dotLayer.frame = CGRectMake(-10, 0, 10, 10);dotLayer.backgroundColor = [UIColor greenColor].CGColor;self.dotLayer = dotLayer;
[self.layer addSublayer:dotLayer];

3.當點擊開始時創建幀動畫動畫
CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];anim.keyPath = @"position";
anim.path = self.path.CGPath;
anim.repeatCount = MAXFLOAT;
anim.duration = 2;
[self.dotLayer addAnimation:anim forKey:nil];

4.讓當前控制器的view成爲複製層.+(Class)layerClass{

return [CAReplicatorLayer class];}

複製是控件
讓動畫延時執 ,就會有動畫的效果.
CAReplicatorLayer *repL = (CAReplicatorLayer *)self.layer;repL.instanceCount = 30;
repL.instanceDelay = 0.2;