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

https://blog.csdn.net/qiwenmingshiwo/article/details/75806637

粒子效果路径移动
一说明
1 效果
2 步骤分析
二代码
1 VCViewh
2 VCViewm
3 ViewControllerm
粒子效果——路径移动
一、说明
1.1 效果
效果如图

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

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

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

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

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

+(Class)layerClass{
//复制层
return [CAReplicatorLayer class];
}
1
2
3
4
创建一个粒子,并且把粒子添加到复制层

//添加粒子
CALayer *dotL = [CALayer layer];
dotL.frame = CGRectMake(-20, 0, 20, 20);
dotL.backgroundColor = [UIColor redColor].CGColor;
self.dotLayer = dotL;
[self.layer addSublayer:dotL];
1
2
3
4
5
6
复制粒子

//复制粒子
CAReplicatorLayer *repL = (CAReplicatorLayer*)self.layer;
repL.instanceCount = 30;
repL.instanceDelay = 0.2;
1
2
3
4
第四步：添加动画

第五步：实现重绘制功能

注意：我们使用的是自定义的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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
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
————————————————
版权声明：本文为CSDN博主「愤怒的小明」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qiwenmingshiwo/article/details/75806637