quartz 2d

quartz 2d的知识我总是容易忘记，在这里打算花点时间整理一下，对自己和对大家都是有好处的，如果我有什么不对或者不全的地方 请大家给予指正，鄙人不胜感激。

画一条直线

绘图的基本步骤

• 创建上下文（这个必须在drawRect方法才可以 ，默认view 调用一次，每次调用setNeedsDisplay 它会调用一次）
• 对- (void)drawRect:(CGRect)rect说明
  1.调用时机：是在view加载完毕的时候开始调用
  2.rect 就是view的bounds
  3.用来专门绘制上下文的
• 上下文步骤的详细说明
  1.创建上下文
  2.创建路径
  3.将路径添加到上下文
  4.开始绘制
• 画一条直线的详细代码

- (void)drawRect:(CGRect)rect {
    // 获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 创建路径
    UIBezierPath *path = [[UIBezierPath alloc] init];
    // 创建起点
    [path moveToPoint:CGPointMake(10, 100)];
    // 创建终点
    [path addLineToPoint:CGPointMake(100, 10)];
    // 在加上一个终点
    [path addLineToPoint:CGPointMake(180, 100)];
    // 设置线宽
    CGContextSetLineWidth(ctx, 10);
    // 设置颜色
    [[UIColor greenColor] setStroke];
    // 添加圆角（在两条线连接的地方）
    CGContextSetLineJoin(ctx, kCGLineJoinRound);
    // 设置两条线的尾部的圆角
    CGContextSetLineCap(ctx, kCGLineCapRound);
    // 将路径添加到上下文上
    CGContextAddPath(ctx, path.CGPath);
    // 进行绘制
    CGContextStrokePath(ctx);
}

1.png

• 画一条曲线

- (void)drawRect:(CGRect)rect {
    // 获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 创建路径
    UIBezierPath *path = [[UIBezierPath alloc] init];
    //创建起始点
    [path moveToPoint:CGPointMake(10, 100)];
    // 画曲线
    [path addQuadCurveToPoint:CGPointMake(180, 100) controlPoint:CGPointMake(100, 0)];
    // 设置颜色
    [[UIColor greenColor] setStroke];
    // 设置线宽
    CGContextSetLineWidth(ctx, 10);
    // 设置两条线的尾部的圆角
    CGContextSetLineCap(ctx, kCGLineCapRound);
    // 将路径添加到上下文上
    CGContextAddPath(ctx, path.CGPath);
    // 进行绘制
    CGContextStrokePath(ctx);
}

2.png

• 画一个长方形或者正方形

- (void)drawRect:(CGRect)rect {
    // 用这个方法创建的时候已经默认创建了上下文
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(10, 10, 100, 100)];
    // 设置四个角的样式
    path.lineJoinStyle = kCGLineJoinRound;
    // 设置颜色
    [[UIColor greenColor] setStroke];
    // 设置边角宽度
    path.lineWidth = 10.0;
    // 开始绘制
    [path stroke];
}

2.png

• 画一个圆形

- (void)drawRect:(CGRect)rect {
    
    // 用这个方法创建的时候已经默认创建了上下文
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 100, 100) cornerRadius:50];
    // 设置四个角的样式
    path.lineJoinStyle = kCGLineJoinRound;
    // 设置颜色
    [[UIColor greenColor] setStroke];
    // 设置边角宽度
    path.lineWidth = 10.0;
    // 开始绘制
    [path stroke];

} 

1.png

• 画一个实心圆 用另外的一种方法

- (void)drawRect:(CGRect)rect {
   
    // 创建上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // frame
    CGRect frame = CGRectMake(10, 10, 100, 100);
    // 设置颜色
    [[UIColor greenColor] set];
    // 画一个圆形的区域
    CGContextAddEllipseInRect(ctx, frame);
    // 开始绘制
    CGContextFillPath(ctx);

} 

1.png

• 画一个椭圆(空心的)

- (void)drawRect:(CGRect)rect {
    // 创建路径
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 10, 180, 100)];
    // 设置宽度
    path.lineWidth = 10;
    // 设置颜色
    [[UIColor greenColor] setStroke];
    // 开始绘制
    [path stroke];
}

空心的椭圆.png

• 画一个实心的椭圆

/**
 画一个实心的椭圆
 */
- (void)drawRealOval {
    // 创建路径
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 10, 180, 100)];
    // 设置颜色
    [[UIColor greenColor] setFill];
    // 开始绘制
    [path fill];
}

实心的椭圆.png

• 画一个空心的圆弧

/**
 画一个空心的圆弧
 */
-(void)drawArc {
    // 开始的角度
    CGFloat startA = -M_PI_2;
    // 结束的角度
    CGFloat endA = M_PI_2;
    // 开始创建路径（clockwise ： yes  是顺时针 no：逆时针）
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:80 startAngle:startA endAngle:endA clockwise:YES];
    // 设置颜色
    [[UIColor greenColor] setStroke];
    // 宽度
    path.lineWidth = 10;
    // 开始绘制
    [path stroke];
}

空心的圆弧.png

• 画一个实心的圆弧

/**
 画一个实心的圆弧
 */
- (void)drawRealArc {
    // 开始的角度
    CGFloat startA = -M_PI_2;
    // 结束的角度
    CGFloat endA = M_PI_2;
    // 开始创建路径（clockwise ： yes  是顺时针 no：逆时针）
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:80 startAngle:startA endAngle:endA clockwise:YES];
    // 设置颜色
    [[UIColor greenColor] setFill];
    // 开始绘制
    [path fill];
}

实心圆弧.png

• 画一个字符串（ [str drawAtPoint:CGPointZero withAttributes:dic];其中它与 [str drawInRect:rect withAttributes:dic]的区别是drawInRect:rect可以换行的）

- (void)drawRect:(CGRect)rect {
    NSString *str = @"哈哈哈哈";
    NSShadow *shadow = [[NSShadow alloc] init];
    // 宽高的偏移
    shadow.shadowOffset = CGSizeMake(10, 10);
    // 暗影颜色
    shadow.shadowColor = [UIColor greenColor];
    // 模糊
    shadow.shadowBlurRadius = 5;
    NSDictionary *dic = @{
                          NSFontAttributeName:[UIFont systemFontOfSize:30],
                          NSForegroundColorAttributeName : [UIColor whiteColor],
                          NSShadowAttributeName : shadow
                          };
    [str drawAtPoint:CGPointZero withAttributes:dic];
   
}

1.png

• 画文字 2（ [str drawInRect:rect withAttributes:dic];）

- (void)drawRect:(CGRect)rect {
    
    NSString *str = @"哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈";
    NSShadow *shadow = [[NSShadow alloc] init];
    // 宽高的偏移
    shadow.shadowOffset = CGSizeMake(10, 10);
    // 暗影颜色
    shadow.shadowColor = [UIColor greenColor];
    // 模糊
    shadow.shadowBlurRadius = 5;
    NSDictionary *dic = @{
                          NSFontAttributeName:[UIFont systemFontOfSize:30],
                          NSForegroundColorAttributeName : [UIColor whiteColor],
                          NSShadowAttributeName : shadow
                          };
    [str drawInRect:rect withAttributes:dic];
}

2.png

• image的绘制

- (void)drawRect:(CGRect)rect {
   
    UIImage *image = [UIImage imageNamed:@"1"];
    // 这个可以把一整张图片显示完全
    [image drawInRect:rect];
}

2.png

• image的另外一个显示方法

- (void)drawRect:(CGRect)rect {
    UIImage *image = [UIImage imageNamed:@"1"];
    // 显示不完全 按照实际的比例进行显示
    [image drawAtPoint:CGPointZero];
}

3.png

• image 平铺的方式

- (void)drawRect:(CGRect)rect {
    UIImage *image = [UIImage imageNamed:@"美眉"];
    // 显示不完全 按照实际的比例进行显示
    [image drawAsPatternInRect:rect];
}

4.png

• 接下来模仿一下系统的imageview的方法，具体代码我会写详细的注释，为了自己以后忘记的时候能够回来看看
  1）写一个自定义的view（LDGImageView.h 文件）

#import <UIKit/UIKit.h>

@interface LDGImageView : UIView

/** image*/
@property (nonatomic, strong) UIImage *image;
/**
 初始化

 @param image image
 @return 对象本身
 */
- (instancetype)initWithImage:(UIImage *)image;

@end

2）LDGImageView.m 文件

#import "LDGImageView.h"

@implementation LDGImageView

-(void)setImage:(UIImage *)image {
    _image = image;
    [self setNeedsDisplay];
}
/**
 初始化
 
 @param image image
 @return 对象本身
 */
- (instancetype)initWithImage:(UIImage *)image {
    if (self = [super init]) {
        self.image = image;
        self.frame = CGRectMake(0, 0, image.size.width, image.size.height);
        [self setNeedsDisplay];
    }
    return self;
    
}
- (void)drawRect:(CGRect)rect {
    [self.image drawInRect:rect];
    
}

3）viewController的使用
3.1）普通方法的调用

 LDGImageView *imageView = [[LDGImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    imageView.image = [UIImage imageNamed:@"1"];
    [self.view addSubview:imageView];

7.png

3.2) initimage方法的调用

 LDGImageView *imageView = [[LDGImageView alloc] initWithImage:[UIImage imageNamed:@"1"]];
    [self.view addSubview:imageView];

5.png

3.3) 切换image也是可以的，这里不做演示了。

• 图形上下文的状态栈

- (void)drawRect:(CGRect)rect {
    //  创建上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //  创建路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    //  创建一条直线
    [path moveToPoint:CGPointMake(10, 100)];
    [path addLineToPoint:CGPointMake(190, 100)];
    //  将当前的上下文添加到上下文的栈里
    CGContextSaveGState(ctx);
    //  设置颜色和宽度
    [[UIColor greenColor] setStroke];
    CGContextSetLineWidth(ctx, 10);
    //  将路径添加到上下文上
    CGContextAddPath(ctx, path.CGPath);
    //  开始绘制
    CGContextStrokePath(ctx);
    
    // 从新初始化路径
    path = [UIBezierPath bezierPath];
    // 恢复最开始的状态
    CGContextRestoreGState(ctx);
    // 绘制路径
    [path moveToPoint:CGPointMake(100, 10)];
    [path addLineToPoint:CGPointMake(100, 190)];
    //  设置颜色和宽度
    [[UIColor blueColor] setStroke];
    CGContextSetLineWidth(ctx, 5);
    // 将路径添加到上下文上
    CGContextAddPath(ctx, path.CGPath);
    // 开始绘制
    CGContextStrokePath(ctx);
}

1.png

• 图形上下文的矩阵操作
  1.1) 平移

- (void)drawRect:(CGRect)rect {
    // 创建上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 创建一个实心圆
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 10, 50, 50)];
    // 设置颜色
    [[UIColor greenColor] setFill];
    // 平移
    CGContextTranslateCTM(ctx, 100, 120);
    // 开始绘制
    [path fill];
}

1.png

1.2)旋转

- (void)drawRect:(CGRect)rect {
    
    // 创建上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 创建一个实心圆
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 10, 100, 50)];
    // 设置颜色
    [[UIColor greenColor] setFill];
    // 旋转
    CGContextRotateCTM(ctx, M_PI_4);
    // 开始绘制
    [path fill];
 
}

2.png

1.3)缩放大小

- (void)drawRect:(CGRect)rect {
    
    // 创建上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 创建一个实心圆
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 10, 100, 50)];
    // 设置颜色
    [[UIColor greenColor] setFill];
    // 缩放
    CGContextScaleCTM(ctx, 2.0, 2.0);
    // 开始绘制
    [path fill];
}

3.png

• 一个图片水印的例子，不用在drawrect方法里边实现了

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 开启图片上下文
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(200, 200), NO, 0.0);
    // 创建image
    UIImage *image = [UIImage imageNamed:@"美眉"];
    [image drawInRect:CGRectMake(0, 0, 200, 200)];
    // 创建logo文字
    NSString *str = @"阿斯顿哈说的";
    [str drawAtPoint:CGPointMake(20, 20) withAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:12.0],
                                                          NSForegroundColorAttributeName :[UIColor redColor]
                                                          }];
    // 获得上下文生成的图片
    UIImage *getImage = UIGraphicsGetImageFromCurrentImageContext();
    // 结束当前图片上下文
    UIGraphicsEndImageContext();
    
    self.displayImageView.image = getImage;

}

4.png

• 一个带有边框的圆形片的裁剪（给image加的分类）

/**
 裁剪一个图片为圆形
 
 @param borderWidth 边框宽度
 @param borderColor 边框颜色
 @param imageViewWidth 外面的imageview的宽度，如果为0 将按照比例显示不按照正确的显示，如果imageview不是正方形请按照最小的传递
 @param imageName 图片的名字
 @return 想要的图片
 */
+(UIImage *)imageWithBorderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor imageViewWidth:(CGFloat)imageViewWidth imageName:(NSString *)imageName {
    
    if (imageName.length == 0) {
        return nil;
    }
    UIImage *image = [UIImage imageNamed:imageName];
    CGFloat imageWidth = image.size.width;
    CGFloat imageHeight = image.size.height;
    imageWidth < imageHeight ? (imageHeight = imageWidth) : (imageWidth = imageHeight);
    // 这里为了精确显示传入进来的borderwidth，计算比例
    if (imageViewWidth > 0) {
        CGFloat scale = 1.0 * (imageWidth + 2*borderWidth)/imageViewWidth;
        if (scale < 1.0) {
            scale = 1.0 * imageWidth/imageViewWidth;
        }
        borderWidth = scale * borderWidth;
    }
    // 创建图片上下文
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(imageWidth + 2*borderWidth, imageHeight + 2*borderWidth), NO, 0.0);
    // 创建外面的大圆
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, imageWidth + 2*borderWidth, imageHeight + 2*borderWidth)];
    // 绘制颜色
    [borderColor set];
    // 填写
    [path fill];
    // 创建小圆
    CGRect rect = CGRectMake(borderWidth, borderWidth, imageWidth, imageHeight);
    path = [UIBezierPath bezierPathWithOvalInRect:rect];
    // 添加裁剪
    [path addClip];
    // 图片绘制
    [image drawInRect:rect];
    // 获取新的图片
    UIImage *getImage = UIGraphicsGetImageFromCurrentImageContext();
    // 关闭图片上下文
    UIGraphicsEndImageContext();
    return getImage;
}

图片本身大于imageview.png 图片本身小于imageview.png

• 截屏

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    // 开启图片上下文
    UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, NO, 0.0);
    // 获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 进行绘制
    [self.view.layer renderInContext:ctx];
    // 获取图片
    UIImage *getImage = UIGraphicsGetImageFromCurrentImageContext();
    // 关闭上下文
    UIGraphicsEndImageContext();
    // 保持原比例
    NSData *data = UIImageJPEGRepresentation(getImage, 1.0);
    [data writeToFile:@"/Users/apple/Desktop/l.jpg" atomically:YES];
}

1.png

• 图片截屏

/**
 拖拽事件

 @param sender 首饰
 */
- (IBAction)panGesture:(UIPanGestureRecognizer *)sender {
    if (sender.state == UIGestureRecognizerStateBegan) {
        self.startP = [sender locationInView:self.view];
        
    }else if (sender.state == UIGestureRecognizerStateChanged){
        CGPoint currentP = [sender locationInView:self.view];
        CGFloat width = currentP.x - self.startP.x;
        CGFloat height = currentP.y - self.startP.y;
        self.corverView.frame = CGRectMake(self.startP.x, self.startP.y, width, height);
    }else if (sender.state == UIGestureRecognizerStateEnded){
        // 开启图片的上下文
        UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, NO, 0.0);
        // 创建路径
        UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.corverView.frame];
        // 超出部分进行裁剪
        [path addClip];
        // 拿到当前的上下文
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        // 开始绘制
        [self.displayImageView.layer renderInContext:ctx];
        // 获得图片
        UIImage *getImage = UIGraphicsGetImageFromCurrentImageContext();
        // 关闭上下文
        UIGraphicsEndImageContext();
        self.displayImageView.image = getImage;
        // 移除覆盖的view
        [self.corverView removeFromSuperview];
    }
}

1.png 2.png

• 图片擦除

- (IBAction)panGesture:(UIPanGestureRecognizer *)sender {
    
    // 擦除的宽度
    CGFloat width = 50;
    CGPoint currrentP = [sender locationInView:self.view];
    CGFloat pointX = currrentP.x - width *0.5;
    CGFloat pointY = currrentP.y - width *0.5;
    // 创建图片上下文
    UIGraphicsBeginImageContextWithOptions(self.displayImageView.bounds.size, NO, 0.0);
    // 获取当前的上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 进行绘制
    [self.displayImageView.layer renderInContext:ctx];
    // 擦除区域
    CGRect clearRect = CGRectMake(pointX, pointY, width, width);
    // 进行擦除
    CGContextClearRect(ctx, clearRect);
    // 生成新的图片
    UIImage *getImage = UIGraphicsGetImageFromCurrentImageContext();
    // 结束图片的上下文
    UIGraphicsEndImageContext();
    self.displayImageView.image = getImage;

1.png

• 一个手势解锁的例子(写的一般有时间在优化)

#import "GestureView.h"
#define ButtonW 70
#define ButtonLeftMargen 30
#define ButtonTopMargen 30
#define ButtonCommonMargen 10

@interface GestureView ()

@property (strong, nonatomic) NSMutableArray *buttonArray;
@property (assign, nonatomic) CGPoint currentP;

@end
@implementation GestureView

-(NSMutableArray *)buttonArray {
    if (!_buttonArray) {
        _buttonArray = [NSMutableArray array];
    }
    return _buttonArray;
}
- (void)awakeFromNib {
    [super awakeFromNib];
    // 创建button
    for (NSInteger index = 0; index < 9; index ++) {
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        [button setImage:[UIImage imageNamed:@"gesture_normal"] forState:UIControlStateNormal];
        [button setImage:[UIImage imageNamed:@"gesture_selected"] forState:UIControlStateSelected];
        button.tag = index;
        button.userInteractionEnabled = NO;
        [self addSubview:button];
    }
}
/**
 改变一些frame
 */
- (void)layoutSubviews {
    [super layoutSubviews];
    // 在这里正式的设置button
    for (NSInteger index = 0; index < self.subviews.count; index++) {
        UIButton *button = (UIButton *)self.subviews[index];
        CGFloat buttonL = (index % 3)*(ButtonW + ButtonCommonMargen);
        CGFloat buttonT = (index / 3)*(ButtonW + ButtonCommonMargen);
        button.frame = CGRectMake(ButtonLeftMargen + buttonL, ButtonTopMargen + buttonT, ButtonW, ButtonW);
    }
}
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    CGPoint currentP = [self getPointWithTouchs:touches];
    UIButton *button = [self getButtonThroughPoint:currentP];
    if (button && button.selected == NO) {
        button.selected = YES;
        [self.buttonArray addObject:button];
        [self setNeedsDisplay];
    }
}
-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    CGPoint currentP = [self getPointWithTouchs:touches];
    UIButton *button = [self getButtonThroughPoint:currentP];
    if (button && button.selected == NO) {
        button.selected = YES;
        [self.buttonArray addObject:button];
        
    }
    self.currentP = currentP;
    [self setNeedsDisplay];
}
-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    
    NSString *str = [[NSString alloc] init];
    for (UIButton *button in self.buttonArray) {
        button.selected = NO;
        str = [str stringByAppendingString:[NSString stringWithFormat:@"%zd",button.tag]];
    }
    NSLog(@"你想要的结果是 ： %@",str);
    [self.buttonArray removeAllObjects];
    self.currentP = CGPointMake(0, 0);
    [self setNeedsDisplay];
    
    
    
}

/**
 通过一个点来获取button

 @param point 点
 @return 按钮
 */
- (UIButton *)getButtonThroughPoint:(CGPoint)point {
    for (UIButton *button in self.subviews) {
        if (CGRectContainsPoint(button.frame, point)) {
            return button;
        }
    }
    return nil;
}
/**
 通过touches来获得当前的点

 @param touches touches
 @return 获取的点
 */
- (CGPoint )getPointWithTouchs:(NSSet <UITouch *> *)touches {
    UITouch *touch = [touches anyObject];
    return [touch locationInView:self];
}

/**
 开始绘制

 @param rect 矩形
 */
- (void)drawRect:(CGRect)rect {
    
    if (self.buttonArray.count == 0) {
        return;
    }
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    for (NSInteger index = 0; index < self.buttonArray.count; index ++) {
        UIButton *button = (UIButton *)self.buttonArray[index];
        if (index == 0) {
            [path moveToPoint:button.center];
        }else {
            [path addLineToPoint:button.center];
        }
    }
    if (self.currentP.x > 0) {
       [path addLineToPoint:self.currentP];
    }
    [[UIColor greenColor] set];
    path.lineWidth = 5;
    [path setLineJoinStyle:kCGLineJoinRound];
    [path stroke];
    
}

@end

1.png

• 涂鸦的功能

// drawView的.h 文件
#import <UIKit/UIKit.h>

@interface DrawView : UIView

/**
 显示的imageview
 */
@property (nonatomic,weak)IBOutlet UIImageView *displayImageView;
/**
 颜色
 */
@property (strong, nonatomic) UIColor *color;

/**
 宽度
 */
@property (assign, nonatomic) CGFloat width;
/**
  清除的操作
 */
- (void)clearAction;
/**
  撤销的操作
 */
- (void)undoAction;
/**
 橡皮擦的事件
 */
- (void)eraserAction;

@end
// drawView的.m文件

#import "DrawView.h"
#import "DrawBezierPath.h"

@interface DrawView ()

@property (strong, nonatomic) DrawBezierPath *drawPath;
@property (strong, nonatomic) NSMutableArray *pathArray;



@end
@implementation DrawView
-(NSMutableArray *)pathArray {
    if (!_pathArray) {
        _pathArray = [NSMutableArray array];
    }
    return _pathArray;
}
- (void)awakeFromNib {
    [super awakeFromNib];
    // 添加拖拽的事件
    UIPanGestureRecognizer *panGes = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panAction:)];
    [self addGestureRecognizer:panGes];
}

/**
 手势拖拽的响应

 @param panGesture 拖拽手势
 */
- (void)panAction:(UIPanGestureRecognizer *)panGesture{
    
    if (panGesture.state == UIGestureRecognizerStateBegan) {
        self.drawPath = [DrawBezierPath bezierPath];
        CGPoint currentPoint = [panGesture locationInView:self];
        [self.drawPath moveToPoint:currentPoint];
        _width > 0 ? (self.drawPath.lineWidth = _width):(self.drawPath.lineWidth = 1);
        _color != nil ? (self.drawPath.pathColor = _color) : (self.drawPath.pathColor = [UIColor blackColor]);
        [self.pathArray addObject:self.drawPath];
    }else if (panGesture.state == UIGestureRecognizerStateChanged){
        CGPoint currentPoint = [panGesture locationInView:self];
        [self.drawPath addLineToPoint:currentPoint];
    }
    [self setNeedsDisplay];
}

#pragma mark - 外部事件的响应
/**
 清除的操作
 */
- (void)clearAction{
    [self.pathArray removeAllObjects];
    [self setNeedsDisplay];
}
/**
 撤销的操作
 */
- (void)undoAction {
    [self.pathArray removeLastObject];
    [self setNeedsDisplay];
}
/**
 橡皮擦的事件
 */
- (void)eraserAction{
    self.color = self.backgroundColor;
    [self setNeedsDisplay];
}

/**
 设置颜色
 
 @param color 颜色
 */
- (void)setColor:(UIColor *)color{
    _color = color;
    [self setNeedsDisplay];
}
/**
 设置宽度
 
 @param width 宽度
 */
- (void)setWidth:(CGFloat)width{
    _width = width;
    [self setNeedsDisplay];
}

/**
 绘制上下文的部分

 @param rect 当前的上下文的区域
 */
- (void)drawRect:(CGRect)rect {
    
    for (DrawBezierPath *path in self.pathArray) {
        [path.pathColor set];
        [path stroke];
    }
}

@end
// DrawBezierPath.h文件 
#import <UIKit/UIKit.h>

@interface DrawBezierPath : UIBezierPath
@property (strong, nonatomic) UIColor *pathColor;


@end
// DrawBezierPath.m文件 
#import "DrawBezierPath.h"

@implementation DrawBezierPath

@end

1.png

• CALayer
• layer 和view的区别：
  1）view可以处理事件的响应，而layer是用来显示，不能处理事件
  2）每个UIView都有一个layer提供内容的绘制与显示，并且UIView的尺寸和样式都由CALayer所提供，两者都是树形结构，layer 有一个SubLayers view有一个SubViews,但是layer比view多一个anchorPoint
  3）其实个人理解view的frame都是由本身的layer的frame确定的
  4）看这个链接view和layer的区别

    //  阴影的透明度，默认是完全透明的也就是0
    self.redView.layer.shadowOpacity = 1.0;
    //  设置阴影的颜色
    self.redView.layer.shadowColor = [UIColor greenColor].CGColor;
    //  设置阴影的偏移量
    self.redView.layer.shadowOffset = CGSizeMake(50, -50);
    //  设置阴影的模糊程度
    self.redView.layer.shadowRadius = 10;

1.png

• 两种方式显示图片

   // 第一种方式显示图片
    self.redView.layer.contents = (id)[UIImage imageNamed:@"timg"].CGImage;
    self.redView.layer.cornerRadius = 50;
    self.redView.layer.masksToBounds = YES;
    // 第二种方式显示图片
    self.displayImageView.layer.cornerRadius = 50;
    self.displayImageView.layer.masksToBounds = YES;

1.png

• uiimageview也是继承view 为什么在下面的这段代码中 view就被裁剪了而imagview 没有变化 因为图片显示的是在layer的内容层上 第一个代码没有显示内容 所以可以被裁剪，如果两段代码都加上layer.masksToBounds = YES就起作用了 因为masksToBounds是裁剪根试图以及根上的所有的内容进行裁剪

    // 第一种方式显示,可以裁剪
    self.redView.layer.cornerRadius = 50;
    // 第二种方式显示
    self.displayImageView.layer.cornerRadius = 50;

1.png

• 图片3d的平移、缩放、旋转

[UIView animateWithDuration:1.0 animations:^{
 // 第一种方式
        // 3d的类型缩放
        self.displayImageView.layer.transform = CATransform3DMakeScale(1.5, 1.8, 3.0);
        // 3d类型旋转
        self.displayImageView.layer.transform = CATransform3DMakeRotation(M_PI, 1.0, 1.0, 1.0);
        // 3d类型旋转
        self.displayImageView.layer.transform = CATransform3DMakeTranslation(100, 100, 100);
 // 第二种方式
        [self.displayImageView.layer setValue:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.5, 1.8, 3.0)] forKeyPath:@"transform"];
        [self.displayImageView.layer setValue:[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI, 1.0, 1.0, 1.0)] forKeyPath:@"transform"];
        [self.displayImageView.layer setValue:[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(100, 100, 100)] forKeyPath:@"transform"];
  // 第三种方式 简单快速的实现 kvc 这种方式实现
        [self.displayImageView.layer setValue:@(1.5) forKeyPath:@"transform.scale"];
        [self.displayImageView.layer setValue:@(M_PI) forKeyPath:@"transform.rotation"];
        [self.displayImageView.layer setValue:@(150) forKeyPath:@"transform.translation.x"];

    }];

1.png

• position 和anchorPosition的区别和联系
• 解释anthorPosition 是图层的点默认在position的显示的位置，anchorPosition默认的是（0.5，0.5）范围是（0-1）表示图层的宽高比
• 这两段代码是相同的

    CALayer *layer = [[CALayer alloc] init];
    layer.frame = CGRectMake(0, 0, 100, 100);
    layer.backgroundColor = [UIColor redColor].CGColor;
    [self.view.layer addSublayer:layer];

     CALayer *layer = [[CALayer alloc] init];
    layer.frame = CGRectMake(0, 0, 100, 100);
    layer.backgroundColor = [UIColor redColor].CGColor;
    layer.anchorPoint = CGPointMake(0.5, 0.5);
    [self.view.layer addSublayer:layer];

• position 在0 和anchorPosition 在（0.5，0.5）

 CALayer *layer = [[CALayer alloc] init];
    layer.frame = CGRectMake(0, 0, 100, 100);
    layer.backgroundColor = [UIColor redColor].CGColor;
    layer.anchorPoint = CGPointMake(0.5, 0.5);
    layer.position = CGPointMake(0, 0);
    [self.view.layer addSublayer:layer];

1.png

• position 在（30，50） 和anchorPosition 在（0，0）

 CALayer *layer = [[CALayer alloc] init];
    layer.frame = CGRectMake(0, 0, 100, 100);
    layer.backgroundColor = [UIColor redColor].CGColor;
    layer.anchorPoint = CGPointMake(0, 0);
    layer.position = CGPointMake(30,50);
    [self.view.layer addSublayer:layer];

1.png

• 隐式动画
• 自己的理解：他是系统非根层的动画，有我们自己创建的layer像改变position 、bounds、还有backgroundColor 等等的会存在默认的动画，原因是系统会创建一个包装的对象对他们进行包装，包装完毕才会执行改变

- (void)viewDidLoad {
    [super viewDidLoad];
    
    CALayer *layer = [[CALayer alloc] init];
    layer.frame = CGRectMake(0, 0, 100, 100);
    layer.backgroundColor = [UIColor redColor].CGColor;
    layer.anchorPoint = CGPointMake(0, 0);
    layer.position = CGPointMake(30,50);
    self.layer = layer;
    [self.view.layer addSublayer:layer];
}

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
    [CATransaction begin];
    // 取消动画
    [CATransaction setDisableActions:YES];
    // 设置动画的时常
    [CATransaction setAnimationDuration:5.0];
    self.layer.backgroundColor = [UIColor greenColor].CGColor;
    self.layer.position = CGPointMake(100, 200);
    [CATransaction commit];
    
}

• 心跳动画 主要是CABasicAnimation的使用
• 一些属性的说明（他的主要作用是 平移、旋转、缩放这些）
  duration 动画的时间
  repeatCount 重复的次数。不停重复设置为 HUGE_VALF
  repeatDuration 设置动画的时间。
  beginTime 指定动画开始的时间。从开始延迟几秒的话，设置为【CACurrentMediaTime() + 秒数】 的方式
  timingFunction 设置动画的速度变化
  autoreverses 动画结束时是否执行逆动画
  fromValue 所改变属性的起始值
  toValue 所改变属性的结束时的值
  byValue 所改变属性相同起始值的改变量
• 心跳动画

 CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    animation.duration = 1.5;
    animation.fromValue = @(0);
    animation.toValue = @(2);
    // 无限重复
    animation.repeatCount = NSIntegerMax;
    // 自动恢复原来的位置（有一个恢复的动画）
    animation.autoreverses = YES;
    // 确定完成后动画是否从目标图层的动画中移除。
    // 当“是”时，一旦活动持续时间过去，动画将从目标图层的动画中移除。 默认为YES
    animation.removedOnCompletion = NO;
    [self.heartimageView.layer addAnimation:animation forKey:nil];

• 移动的动画

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
    animation.duration = 2;
    animation.repeatCount = NSIntegerMax;
    animation.beginTime =CACurrentMediaTime() + 1;// 1秒后执行
    
    animation.fromValue = [NSValue valueWithCGPoint:self.heartimageView.layer.position]; // 起始帧
    
    animation.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 300)]; // 终了帧
    
    // 视图添加动画
    
    [self.heartimageView.layer addAnimation:animation forKey:@"move-layer"];

• 旋转的动画

 // 对Y轴进行旋转（指定Z轴的话，就和UIView的动画一样绕中心旋转）
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
    animation.duration = 2;
    
    animation.repeatCount = NSIntegerMax;
    
    animation.beginTime = CACurrentMediaTime() + 1; // 1秒后执行
    
    animation.fromValue = [NSNumber numberWithFloat:0.0]; // 起始角度
    // 动画结束后停在最后位置状态的解决方法
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    
    animation.toValue = [NSNumber numberWithFloat:M_PI]; // 终止角度
    
    [self.heartimageView.layer addAnimation:animation forKey:@"rotate-layer"];

• 透明度的动画

//opacity 指layer的透明度
    
    CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    
    basicAnimation.fromValue = @(1.0);
    
    basicAnimation.toValue  = @(0.0);//[NSNumber numberWithFloat:0.0]
    
    basicAnimation.duration = 1.5;
    
    [self.heartimageView.layer addAnimation:basicAnimation forKey:@"op"];

• CAKeyframeAnimation 这个是线性的动画
• 实现 一个图片绕着圆旋转

 CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)];
    animation.path = path.CGPath;
    animation.duration = 3.0;
    animation.repeatCount = NSIntegerMax;
    // 自动恢复原位
    animation.autoreverses = YES;
    //  动画结束后停在最后位置状态的解决方法
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    // 线性起搏，可使动画在其持续时间内均匀发生
    // kCAMediaTimingFunctionEaseInEaseOut： 轻松放松起搏，可以使动画开始缓慢，在其持续时间的中间加速，然后在完成之前再次放慢速度。
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.heartimageView.layer addAnimation:animation forKey:nil];

• 图片的抖动

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
    animation.values = @[@(angele(-10)),@(angele(0))];
    animation.duration = 1.0;
    animation.repeatCount = NSIntegerMax;
    // 自动恢复原位
    animation.autoreverses = YES;
    //  动画结束后停在最后位置状态的解决方法
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    // 线性起搏，可使动画在其持续时间内均匀发生
    // kCAMediaTimingFunctionEaseInEaseOut： 轻松放松起搏，可以使动画开始缓慢，在其持续时间的中间加速，然后在完成之前再次放慢速度。
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.heartimageView.layer addAnimation:animation forKey:nil];

• 转场动画 （CATransition）
• 图片的翻页效果

  index_ ++;
    if (index_ > 3 ) {
        index_ = 1;
    }
    NSString *imageName = [NSString stringWithFormat:@"%d",index_];
    self.heartimageView.image = [UIImage imageNamed:imageName];
    
    CATransition *animation = [CATransition animation];
    /*
     type：动画过渡类型
     subtype：动画过渡方向
     startProgress：动画起点(在整体动画的百分比)
     endProgress：动画终点(在整体动画的百分比)
     */
     // 动画的过度类型
   // animation.type = kCATransitionMoveIn;
    // 或者这个方式也行
    /*
     关于type的总结 后面的一张图片
     */
    animation.type = @"pageCurl";
     // 动画的过度方向
    animation.subtype = kCATransitionFromRight;
    animation.startProgress = 0.1;
    animation.endProgress = 0.7;
    [self.heartimageView.layer addAnimation:animation forKey:nil];

• 关于type的总结

  
  1.jpg
• CATransition的另外一种使用
  自带的动画

[UIView transitionWithView:self.heartimageView duration:2.0 options:UIViewAnimationOptionTransitionFlipFromBottom animations:^{
        index_ ++;
        if (index_ > 3 ) {
            index_ = 1;
        }
        NSString *imageName = [NSString stringWithFormat:@"%d",index_];
        self.heartimageView.image = [UIImage imageNamed:imageName];
    } completion:nil];

• 自带动画2

//  前台页面
    UIView *frontView = [[UIView alloc] initWithFrame:self.view.bounds];
    frontView.backgroundColor = [UIColor colorWithRed:0.345 green:0.349 blue:0.365 alpha:1.000];
    UIImageView *caLogoView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"1"]];
    caLogoView.frame = CGRectMake(70, 80, caLogoView.bounds.size.width, caLogoView.bounds.size.height);
    [frontView addSubview:caLogoView];
    self.frontView = frontView;
    
    //  后台页面
    UIImage *backImage = [UIImage imageNamed:@"2"];
    UIImageView *backView = [[UIImageView alloc] initWithImage:backImage];
    backView.userInteractionEnabled = YES;
    self.backView = backView;
    
    [self.view addSubview:backView];
    [self.view addSubview:frontView];
 // formcview ：在执行动画的过程中，他将会从superview 删除
    // toView ：执行动画结束添加到fromview的父视图
    [UIView transitionFromView:self.frontView    // 从原来视图转到新视图的动画效果设置
                            toView:self.backView  duration:1.0f
                         options:UIViewAnimationOptionTransitionFlipFromLeft
                         completion:nil];

• 动画组

 CAAnimationGroup *group = [CAAnimationGroup animation];
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    animation.fromValue = @(0);
    animation.toValue = @(1.5);
    
    CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    rotationAnimation.fromValue = @(0);
    rotationAnimation.toValue = @(M_PI);
    group.animations = @[animation,rotationAnimation];
    group.duration = 1.5;
    group.repeatCount = NSIntegerMax;
    group.removedOnCompletion = NO;
    group.fillMode = kCAFillModeForwards;
    [self.heartimageView.layer addAnimation:group forKey:nil];

• UIView的动画和图层动画的区别是：
  1.涂层动画不能处理点击等等的事件，本身的frame并不改变。
  2.UIView的动画可以出点点击事件等等 完成与用户的交互。
• 一个图片折叠的动画

-(void)viewDidLoad {
    [super viewDidLoad];
    
    self.heartimageView.layer.contentsRect = CGRectMake(0, 0, 1, 0.5);
    self.bottomImageView.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.5);
    
    self.heartimageView.layer.anchorPoint = CGPointMake(0.5, 1);
    self.bottomImageView.layer.anchorPoint = CGPointMake(0.5, 0);
    // 添加拖拽的手势
    UIPanGestureRecognizer *panGes = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panAction:)];
    [self.view addGestureRecognizer:panGes];
    // 添加隐影的操作(梯度的layer )
    CAGradientLayer *grandientLayer = [CAGradientLayer layer];
    grandientLayer.frame = self.bottomImageView.bounds;
    grandientLayer.colors = @[(id)[UIColor blackColor].CGColor,(id)[UIColor clearColor].CGColor];
    // 确定颜色的渐变方向
    grandientLayer.startPoint = CGPointMake(0, 0);
    grandientLayer.endPoint = CGPointMake(1.0, 1.0);
    // 一个颜色到下一个颜色开始渐变的位置
    grandientLayer.locations = @[@(0.2),@(0.8)];
    // 暗影
    grandientLayer.shadowOpacity = 0.0;
    // 不透明度
    grandientLayer.opacity = 0.0;
    self.grandientLayer = grandientLayer;
    [self.bottomImageView.layer addSublayer:grandientLayer];
}
/**
 添加拖拽的手势

 @param panGes 手势的点击
 */
- (void)panAction:(UIPanGestureRecognizer *)panGes {
    
    CGPoint point = [panGes locationInView:self.view];
    CGFloat angle =  M_PI * 1.0 * point.y /self.view.bounds.size.height;
    
    CATransform3D transform = CATransform3DIdentity;
    // 立体效果 离你眼睛越近 看的越清楚 离你眼睛越远 看的越小
    transform.m34 = -1.0/500.0;
    self.heartimageView.layer.transform = CATransform3DRotate(transform, -angle, 1.0, 0, 0);
    // 改变透明度
    self.grandientLayer.opacity = 1.0 * point.y /self.view.bounds.size.height;
    
    
    // 结束了进行反弹回去
    if (panGes.state == UIGestureRecognizerStateEnded) {
        // 一个动画
        // delay:动画开始时的等待时间，默认为0
        // usingSpringWithDamping: 反弹系数
        // initialSpringVelocity:动画的速度
        [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
            // 去掉所有的动画 回去
            self.heartimageView.layer.transform = CATransform3DIdentity;
            self.grandientLayer.opacity = 0.0;
        } completion:nil];
    }
}

1.png

• 音乐震动条（类似于网易云音乐）
  音乐震动条
• 利用 制作到影的动画

    CAReplicatorLayer *replicatorLayer = (CAReplicatorLayer *)self.view.layer;
    replicatorLayer.instanceCount = 2;
    //CAReplicatorLayer 旋转是按照本身的锚点来进行旋转的（这里是屏幕的正中央）
    replicatorLayer.instanceTransform = CATransform3DMakeRotation(M_PI, 1, 0, 0);   
    // 绘制阴影
    replicatorLayer.instanceRedOffset -= 0.1;
    replicatorLayer.instanceBlueOffset -= 0.1;
    replicatorLayer.instanceGreenOffset -= 0.1;
    // 透明度
    replicatorLayer.instanceAlphaOffset -= 0.1; 

2.png
1.png

• 一个根据线条变化的动画

DrewView.h文件

/**
 开始的事件
 */
- (void)startAction;
/**
 重绘的方法
 */
- (void)redrewAction;

DrewView.m 文件
//
//  DrewView.m
//  基本动画的练习
//
//  Created by apple on 2018/3/19.
//  Copyright © 2018年 apple. All rights reserved.
//

#import "DrewView.h"

@interface DrewView ()

@property (strong, nonatomic) UIBezierPath *path;
@property (strong, nonatomic) CALayer *myLayer;
@property (strong, nonatomic) CAReplicatorLayer *replicatorLayer;


@end

@implementation DrewView

-(void)awakeFromNib {
    [super awakeFromNib];
    
    // 创建一个path
    UIBezierPath *path = [UIBezierPath bezierPath];
    self.path = path;
    // 创建手势
    UIPanGestureRecognizer *panGes = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panAction:)];
    [self addGestureRecognizer:panGes];
    
    // 创建一个layer
    CALayer *myLayer = [[CALayer alloc] init];
    myLayer.frame = CGRectMake(-10, 0, 10, 10);
    myLayer.cornerRadius = 5;
    myLayer.backgroundColor = [UIColor redColor].CGColor;
    self.myLayer = myLayer;
    // 创建复制层
    CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
    replicatorLayer.instanceDelay = 0.25;
    [replicatorLayer addSublayer:self.myLayer];
    [self.layer addSublayer:replicatorLayer];
    self.replicatorLayer = replicatorLayer;
    
}

/**
 拖拽的手势

 @param panGes 手势
 */
- (void)panAction:(UIPanGestureRecognizer *)panGes{
    
    CGPoint currentPoint = [panGes locationInView:self];
    if (panGes.state == UIGestureRecognizerStateBegan) {
      [self.path moveToPoint:currentPoint];
    }else if (panGes.state == UIGestureRecognizerStateChanged){
        [self.path addLineToPoint:currentPoint];
        [self setNeedsDisplay];
    }else if (panGes.state == UIGestureRecognizerStateEnded){
        [self setNeedsDisplay];
    }
}
/**
 开始绘制

 @param rect rect
 */
-(void)drawRect:(CGRect)rect {
    [self.path stroke];
    
}
/**
 开始的事件
 */
- (void)startAction{
    // 创建动画
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.path = self.path.CGPath;
    animation.duration = 1.0;
    animation.repeatCount = NSIntegerMax;
    // 自动复位
    animation.autoreverses = YES;
    // 消除停在最后的位置
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    // 动画匀速
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.myLayer addAnimation:animation forKey:nil];
    // 复制层
    self.replicatorLayer.instanceCount = 30;
//    self.replicatorLayer.instanceTransform = CATransform3DMakeTranslation(0, 2, 0);
    
}
/**
 重绘的方法
 */
- (void)redrewAction{
    [self.path removeAllPoints];
    [self.myLayer removeAllAnimations];
    [self setNeedsDisplay];
}
@end

IMG_0819.GIF

• qq 粘性动画

bagdeButton.h文件
#import <UIKit/UIKit.h>

@interface bagdeButton : UIButton

@end
bagdeButton.m文件
#import "bagdeButton.h"


@interface bagdeButton ()

@property (strong, nonatomic) UIView *smallView;
@property (strong, nonatomic) CAShapeLayer *shapeLayer;


@end
@implementation bagdeButton

-(CAShapeLayer *)shapeLayer {
    if (!_shapeLayer) {
         // 创建根据路线显示涂层的层(形状图层)
        CAShapeLayer *shapeLayer = [CAShapeLayer layer];
        shapeLayer.fillColor = [UIColor redColor].CGColor;
        [self.superview.layer insertSublayer:shapeLayer atIndex:0];
        _shapeLayer = shapeLayer;
    }
    return _shapeLayer;
}


-(void)awakeFromNib {
    [super awakeFromNib];
    // 初始化
    [self setUp];
    
}
-(instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        // 初始化
        [self setUp];
    }
    return self;
}
/**
 初始化
 */
- (void)setUp{
    
    // 本身的基本的设置
    self.layer.cornerRadius = self.bounds.size.width *0.5;
    self.layer.masksToBounds = YES;
    self.titleLabel.textColor = [UIColor whiteColor];
    self.backgroundColor = [UIColor redColor];
    self.titleLabel.font = [UIFont systemFontOfSize:12.0];
    // 添加拖拽的手势
    UIPanGestureRecognizer *panGes = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panAction:)];
    [self addGestureRecognizer:panGes];
    // 添加小圆
    UIView *smallView = [[UIView alloc] initWithFrame:self.frame];
    smallView.backgroundColor = [UIColor redColor];
    smallView.layer.cornerRadius = self.bounds.size.width *0.5;
    self.smallView = smallView;
    [self.superview insertSubview:smallView belowSubview:self];
   
}
/**
 拖拽的手势

 @param panGes 手势
 */
- (void)panAction:(UIPanGestureRecognizer *)panGes {
    
    // 当前weiz的偏移量
    CGPoint panOff = [panGes locationInView:self.superview];
    CGRect frame = self.frame;
    frame.origin = panOff;
    self.frame = frame;
    
    
    // 计算两个圆直接的距离
    CGFloat dx1 = self.frame.origin.x - self.smallView.frame.origin.x;
    CGFloat dy1 = self.frame.origin.y - self.smallView.frame.origin.y;
    // 相当于求三角形的斜边
    CGFloat d = hypotf(dx1, dy1);
    // 改变小圆的frame
    CGRect smallRect = self.smallView.frame;
    CGFloat calculatorWidth = self.frame.size.width - self.frame.size.width *(1.0 * d/60);
    if (calculatorWidth <= 0) {
        calculatorWidth = 0;
    }
    smallRect.size.width = calculatorWidth;
    smallRect.size.height = calculatorWidth;
    self.smallView.frame = smallRect;
    self.smallView.layer.cornerRadius = calculatorWidth * 0.5;
    UIBezierPath *path = [self pathWithSmallView:self.smallView andBigView:self andRadius:d];
    self.shapeLayer.path = path.CGPath;
    
    if (panGes.state == UIGestureRecognizerStateEnded) {
        if (d < 60) {
            CGRect frame = self.frame;
            frame.origin = self.smallView.frame.origin;
            self.frame = frame;
            [self.shapeLayer removeFromSuperlayer];
            self.smallView.frame = self.frame;
            self.smallView.layer.cornerRadius = self.frame.size.width * 0.5;
            self.smallView.hidden = NO;
        }else {
            [self.shapeLayer removeFromSuperlayer];
            self.smallView.hidden = YES;
          
            // 创建一个imageview 来进行一个爆炸的效果
            UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(self.frame.origin.x, self.frame.origin.y, 100, 100)];
            NSMutableArray *imagesArray = [NSMutableArray array];
            for (NSInteger index = 1; index < 4; index ++) {
                NSString *imageName = [NSString stringWithFormat:@"%zd",index];
                UIImage *image = [UIImage imageNamed:imageName];
                [imagesArray addObject:image];
            }
            imageView.animationImages = imagesArray;
            [imageView startAnimating];
            [self.superview addSubview:imageView];
            // 移动从父试图
            [self removeFromSuperview];
            
        }
        
    }
}
/**
 根据小圆和大圆返回路径
 
 @param smallView 小圆
 @param bigButton 大圆
 @param d 半径
 @return 路径
 */
- (UIBezierPath *)pathWithSmallView:(UIView *)smallView andBigView:(UIButton *)bigButton andRadius:(CGFloat )d{
    
    // 求各个点的值
    CGFloat x1 = smallView.center.x;
    CGFloat y1 = smallView.center.y;
    CGFloat x2 = bigButton.center.x;
    CGFloat y2 = bigButton.center.y;
    CGFloat r1 = smallView.frame.size.width * 0.5;
    CGFloat r2 = bigButton.frame.size.width * 0.5;
    
    CGFloat siny = (x2 - x1)/d;
    CGFloat cosy = (y1 - y2)/d;
    CGPoint A = CGPointMake(x1 - cosy*r1, y1 - siny*r1);
    CGPoint B = CGPointMake(x1 + cosy*r1, y1 + siny*r1);
    CGPoint C = CGPointMake(x2 - cosy*r2, y2 - siny*r2);
    CGPoint D = CGPointMake(x2 + cosy*r2, y2 + siny*r2);
    CGPoint P = CGPointMake(A.x + siny*d/2.0, A.y - cosy*d/2.0);
    CGPoint O = CGPointMake(B.x + siny*d/2.0, B.y - cosy*d/2.0);
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:A];
    // 曲线
    [path addQuadCurveToPoint:C controlPoint:P];
    [path addLineToPoint:D];
    // 曲线
    [path addQuadCurveToPoint:B controlPoint:O];
    [path addLineToPoint:A];
    return path;
}

50B1870FAF9F924745754B4BE3836F2E.png

• 微博的动画（类似与点击微博的➕）

WeiBoViewController.h文件
#import <UIKit/UIKit.h>

@interface WeiBoViewController : UIViewController

@end
 WeiBoViewController.m文件
#import "WeiBoViewController.h"

@interface WeiBoViewController ()

@property (strong, nonatomic) NSMutableArray *buttonArray;
@property (strong, nonatomic) NSTimer *timer;
@property (assign, nonatomic) int index;


@end
@implementation WeiBoViewController
-(NSMutableArray *)buttonArray {
    if (!_buttonArray) {
        _buttonArray = [NSMutableArray array];
    }
    return _buttonArray;
}
- (void)viewDidLoad {
    [super viewDidLoad];
    // 初始化
    [self setUp];
    self.timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(timerChange) userInfo:nil repeats:YES];
}

/**
 定时器改变的方法
 */
- (void)timerChange{
    if (self.index == self.buttonArray.count) {
        [self.timer invalidate];
        self.timer = nil;
        return;
    }
    UIButton *button = self.buttonArray[self.index];
    // 这个动画有弹性效果
    [UIView animateWithDuration:0.2 delay:0 usingSpringWithDamping:0.8 initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        // 恢复开始的样子
        button.transform = CGAffineTransformIdentity;
    } completion:nil];
    self.index ++;
}


/**
 初始化
 */
- (void)setUp{
    
    int row = 0;
    int column = 0;
    for (NSInteger index = 0; index < 6; index++) {
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        row = (int)index/3;
        column = (int)index%3;
        button.backgroundColor = [UIColor redColor];
        button.frame = CGRectMake(10 + column*(80 + 20), 467 + row*(80+20), 80, 80);
        [button setTitle:@"微博"forState:UIControlStateNormal];
        [self.view addSubview:button];
        [button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchDown];
        [button addTarget:self action:@selector(buttonClickUpInside:) forControlEvents:UIControlEventTouchUpInside];
        // 移动到最底部
        button.transform = CGAffineTransformMakeTranslation(button.frame.origin.x, self.view.bounds.size.height);
        [self.buttonArray addObject:button];
    }
}

/**
 按钮按下事件

 @param button 按钮
 */
- (void)buttonClick:(UIButton *)button{
 
    button.transform = CGAffineTransformMakeScale(1.2, 1.2);
}
/**
 按钮按下抬起

 @param button 按钮
 */
- (void)buttonClickUpInside:(UIButton *)button {
    
    [UIView animateWithDuration:1.0 animations:^{
        button.transform = CGAffineTransformMakeScale(2, 2);
    }completion:^(BOOL finished) {
        button.alpha = 0;
    }];
}
@end

1.png

• 例子效果

 // 创建粒子效果的layer
    CAEmitterLayer *emiterLayer = [[CAEmitterLayer alloc] init];
    // 创建发射器的位置
    emiterLayer.position = CGPointMake(self.view.bounds.size.width * 0.5, 100);
    // 开启三维的效果
    emiterLayer.preservesDepth = YES;
    // 创建每一个cell 并且给每一个cell添加属性
    CAEmitterCell *cell = [[CAEmitterCell alloc] init];
    // 设置粒子的速度
    cell.velocity = 100;
    cell.velocityRange = 50;
    // 例子的大小 scaleRange:(相当于scale 是 1.2 - 0.2)
    cell.scale = 0.7;
    cell.scaleRange = 0.5;
    // 粒子的方向
    cell.emissionLongitude = M_PI_2;
    cell.emissionRange = 0.5 * M_PI_2;
    // 设置每一秒弹出多少个
    cell.birthRate = 10;
    // 设置例子的旋转
    cell.spin = M_PI_2;
    cell.spinRange = M_PI_2;
    // 例子的存活时间
    cell.lifetime = 5;
    cell.lifetimeRange = 3;
    // 设置粒子的图片
    cell.contents = (id)[UIImage imageNamed:@"good6_30x30_"].CGImage;
    emiterLayer.emitterCells = @[cell];
    [self.view.layer addSublayer:emiterLayer];

image.png

• 补充 CAShapeLayer
• 作用 ：根据路径显示图形
  链接
• 终于总结完了 花了我两个星期的时间，如果大家感觉有什么不对的，千万给予指正，我将不胜荣幸！