欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-28 14:27:15
...

粒子效果——路径移动

一、说明

1.1 效果

效果如图

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

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

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


二、代码

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