iosAnimationDemo - 1

https://github.com/a130785/iosAnimationDemo

将其中的动画拆开，由简单到难展示：

#import "ScaleButton.h"

@interface ScaleButton ()

//渲染层
@property (nonatomic,strong) CAShapeLayer *shapeLayer;

@property (nonatomic,strong) CAShapeLayer *clickCicrleLayer;

@property (nonatomic,strong) UIButton *button;

@end

@implementation ScaleButton

- (instancetype)initWithFrame:(CGRect)frame
{
    if(self = [super initWithFrame:frame])
    {
        _shapeLayer = [self drawMask:frame.size.height/2];
        _shapeLayer.fillColor   = [UIColor clearColor].CGColor;
        _shapeLayer.strokeColor = [UIColor whiteColor].CGColor;
        _shapeLayer.lineWidth   = 2;
        [self.layer addSublayer:_shapeLayer];
        
        _button = [UIButton buttonWithType:UIButtonTypeCustom];
        _button.frame = self.bounds;
        [_button setTitle:@"Enlarge" forState:UIControlStateNormal];
        [_button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        _button.titleLabel.font = [UIFont systemFontOfSize:13.f];
        [self addSubview:_button];
        [_button addTarget:self action:@selector(clickBtn) forControlEvents:UIControlEventTouchUpInside];
    }
    return self;
}


- (void)clickBtn
{
    [self clickAnimation];
}


//点击出现白色圆形
- (void)clickAnimation
{
    /*
     
     解释：为什么动画结束后返回原状态？首先我们需要搞明白一点的是，layer动画运行的过程是怎样的？
     
     其实在我们给一个视图添加layer动画时，真正移动并不是我们的视图本身，而是 presentation layer 的一个缓存。
     动画开始时 presentation layer开始移动，原始layer隐藏，动画结束时，presentation layer从屏幕上移除，原始layer显示。
     这就解释了为什么我们的视图在动画结束后又回到了原来的状态，因为它根本就没动过。
     
     这个例子就是建立一个面积为0的CAShapeLayer视图
     利用CABasicAnimation来将其扩大，产生放大效果
     最后将其移除
     
     
     对于presentationLayer，这个属性不一定总会返回一个实体对象，只有当进行动画或者其他渲染的操作时，这个属性会返回一个在当前屏幕上的layer
     不且每一次执行，这个对象都会不同，它是原layer的一个副本presentationLayer的modelLayer就是其实体layer层。
     
     */
    
    CAShapeLayer *clickCicrleLayer = [CAShapeLayer layer];
    clickCicrleLayer.frame = CGRectMake(self.bounds.size.width/2, self.bounds.size.height/2, 5, 5);
    
    clickCicrleLayer.fillColor = [UIColor whiteColor].CGColor;
    
    clickCicrleLayer.path = [self drawclickCircleBezierPath:0].CGPath;
    
    [self.layer addSublayer:clickCicrleLayer];
    
    //放大变色圆形
    CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
    basicAnimation.duration = 0.5;
    basicAnimation.toValue = (__bridge id _Nullable)([self drawclickCircleBezierPath:(self.bounds.size.height - 10*2)/2].CGPath);
    basicAnimation.removedOnCompletion = NO;
    basicAnimation.fillMode = kCAFillModeForwards;
    
    [clickCicrleLayer addAnimation:basicAnimation forKey:@"clickCicrleAnimation"];
    
    _clickCicrleLayer = clickCicrleLayer;
}


- (CAShapeLayer *)drawMask:(CGFloat)x
{
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.frame = self.bounds;
    
    // 所以说CAShapeLayer 经常和 UIBezierPath相使用
    shapeLayer.path = [self drawBezierPath:x].CGPath;
    return shapeLayer;
}


- (UIBezierPath *)drawBezierPath:(CGFloat)x
{
    CGFloat radius = self.bounds.size.height/2 - 3;
    CGFloat right = self.bounds.size.width-x;
    CGFloat left = x;
    
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    bezierPath.lineJoinStyle = kCGLineJoinRound;
    bezierPath.lineCapStyle = kCGLineCapRound;
    
    //右边圆弧
    [bezierPath addArcWithCenter:CGPointMake(right, self.bounds.size.height/2) radius:radius startAngle:-M_PI/2 endAngle:M_PI/2 clockwise:YES];
    //左边圆弧
    [bezierPath addArcWithCenter:CGPointMake(left, self.bounds.size.height/2) radius:radius startAngle:M_PI/2 endAngle:-M_PI/2 clockwise:YES];
    //闭合弧线
    [bezierPath closePath];
    
    return bezierPath;
}



//画圆
- (UIBezierPath *)drawclickCircleBezierPath:(CGFloat)radius
{
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    /**
     *  center: 弧线中心点的坐标
     radius: 弧线所在圆的半径
     startAngle: 弧线开始的角度值
     endAngle: 弧线结束的角度值
     clockwise: 是否顺时针画弧线
     *
     */
    [bezierPath addArcWithCenter:CGPointMake(0,0) radius:radius startAngle:0 endAngle:M_PI*2 clockwise:YES];
    return bezierPath;
}

@end

调用：

#import "ScaleButton.h"

@interface CAAnimationGroupViewController ()

@end

@implementation CAAnimationGroupViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    [self.view.layer addSublayer: [self backgroundLayer]];
    
    ScaleButton *scale = [[ScaleButton alloc] initWithFrame:CGRectMake(0, 0, 200, 44)];
    scale.center = CGPointMake(self.view.center.x, 100);
    [self.view addSubview:scale];
    
}


- (CAGradientLayer *)backgroundLayer
{
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = self.view.bounds;
    gradientLayer.colors = @[(__bridge id)[UIColor purpleColor].CGColor,(__bridge id)[UIColor redColor].CGColor];
    gradientLayer.startPoint = CGPointMake(0.5, 0);
    gradientLayer.endPoint = CGPointMake(0.5, 1);
    gradientLayer.locations = @[@0.65,@1];
    return gradientLayer;
}

@end

在这里测试可知，如果不将背景设置一个CALayer值，会导致效果无法实现，这个问题还在研究