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;