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

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

粒子效果——路径移动一、说明 1.1 效果
效果如图

文章图片

1.2 步骤分析
我们需要上面的效果，可以按照以下的步骤来操作：
第一步：我们需要创建一个View来支持我们的这种效果（VCView）
第二步：我们需要添加一个手势，创建一个路径，来记录这个手势的移动，并实现我们的绘制功能
第三步：使用复制层来添加粒子

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

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

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

//添加粒子 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;

第四步：添加动画
第五步：实现重绘制功能
注意：我们使用的是自定义的VCView
【iOS学习笔记-084.粒子效果——路径移动】

文章图片

二、代码 2.1 VCView.h

// //VCView.h //03_UIView77_粒子效果1 // //Created by 杞文明 on 17/7/22. //Copyright ? 2017年杞文明. All rights reserved. //#import @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