粒子效果路径移动

一说明

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