iOS学习笔记-084.粒子效果——路径移动

粒子效果——路径移动

一、说明

1.1 效果

效果如图

1.2 步骤分析

我们需要上面的效果，可以按照以下的步骤来操作：

第一步：我们需要创建一个View来支持我们的这种效果（VCView）

第二步：我们需要添加一个手势，创建一个路径，来记录这个手势的移动，并实现我们的绘制功能

第三步：使用复制层来添加粒子

1. 需要支持复制层的功能，那么我们的这个View（VCView）的layer应该是复制层

   +(Class)layerClass{    //复制层    return [CAReplicatorLayer class];}

2. 创建一个粒子,并且把粒子添加到复制层

      //添加粒子   CALayer *dotL = [CALayer layer];   dotL.frame = CGRectMake(-20, 0, 20, 20);   dotL.backgroundColor = [UIColor redColor].CGColor;   self.dotLayer = dotL;   [self.layer addSublayer:dotL];

3. 复制粒子

   //复制粒子   CAReplicatorLayer *repL = (CAReplicatorLayer*)self.layer;   repL.instanceCount = 30;   repL.instanceDelay = 0.2;

第四步：添加动画

第五步：实现重绘制功能

注意：我们使用的是自定义的VCView

---

二、代码

2.1 VCView.h

////  VCView.h//  03_UIView77_粒子效果1////  Created by 杞文明 on 17/7/22.//  Copyright © 2017年 杞文明. All rights reserved.//#import <UIKit/UIKit.h>@interface VCView : UIView//开始动画- (void)start;//重绘- (void)reDraw;@end

2.2 VCView.m

////  VCView.m//  03_UIView77_粒子效果1////  Created by 杞文明 on 17/7/22.//  Copyright © 2017年 杞文明. All rights reserved.//#import "VCView.h"@interface VCView()@property(nonatomic,strong)UIBezierPath *path;@property(nonatomic,strong)CALayer *dotLayer;@end@implementation VCView+(Class)layerClass{    //复制层    return [CAReplicatorLayer class];}//开始动画- (void)start{    //创建帧动画    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];    anim.keyPath = @"position";    anim.path = self.path.CGPath;    anim.repeatCount = MAXFLOAT;    anim.duration = 6;    [self.dotLayer addAnimation:anim forKey:nil];}//重绘- (void)reDraw{    //删除所有动画    [self.dotLayer removeAllAnimations];    //清空路径    [self.path removeAllPoints];    //重绘    [self setNeedsDisplay];}-(void)awakeFromNib{    //添加手势    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];    [self addGestureRecognizer:pan];    //添加粒子    CALayer *dotL = [CALayer layer];    dotL.frame = CGRectMake(-20, 0, 20, 20);    dotL.backgroundColor = [UIColor redColor].CGColor;    self.dotLayer = dotL;    [self.layer addSublayer:dotL];    //复制粒子    CAReplicatorLayer *repL = (CAReplicatorLayer*)self.layer;    repL.instanceCount = 30;    repL.instanceDelay = 0.2;    //创建路径    self.path = [UIBezierPath bezierPath];}-(void)pan:(UIPanGestureRecognizer *)pan{    //或者手指当前的点    CGPoint curentP = [pan locationInView:self];    //手势开始，移动到开始的点    if(pan.state == UIGestureRecognizerStateBegan){        [self.path moveToPoint:curentP];    }else if (pan.state == UIGestureRecognizerStateChanged){        //添加点        [self.path addLineToPoint:curentP];        //重绘        [self setNeedsDisplay];    }}-(void)drawRect:(CGRect)rect{    [self.path stroke];}@end

2.3 ViewController.m

////  ViewController.m//  03_UIView77_粒子效果1////  Created by 杞文明 on 17/7/22.//  Copyright © 2017年 杞文明. All rights reserved.//#import "ViewController.h"#import "VCView.h"@interface ViewController ()@property (strong, nonatomic) IBOutlet VCView *vcView;@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];}- (IBAction)start:(id)sender {    [self.vcView start];}- (IBAction)reDraw:(id)sender {    [self.vcView reDraw];}@end