iOS动画之CAShapeLayer实战-对钩动画

1. 先让view从椭圆变成圆形.修改view的layer的bounds和cornerRadius。

 //一边切圆角一边修改bouse
    CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
    animation1.toValue = @(btnWidth/2.0);
    
    CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"bounds"];
    animation2.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, btnWidth, btnWidth)];
    
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.delegate = self;
    group.duration = 2.0;
    group.animations = @[animation1,animation2];
    group.removedOnCompletion = NO;
    group.fillMode = kCAFillModeForwards;
    group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    [self.layer addAnimation:group forKey:@"hehe"];

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    
    CAAnimation *ani = [self.layer animationForKey:@"hehe"];
    
    if ([ani isEqual:anim]) {
       
        self.layer.cornerRadius = btnWidth/2.0;
        self.bounds = CGRectMake(0, 0, btnWidth, btnWidth);
        
        [self checkAnimaltion];
    }
    
    
}

2. 制作对钩动画.利用CAShapeLayer和贝塞尔曲线做。

- (void)checkAnimaltion
{
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.lineWidth = 10;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    /**
     lineCap
     
     kCALineCapButt: 默认格式，不附加任何形状;
     kCALineCapRound: 在线段头尾添加半径为线段 lineWidth 一半的半圆；
     kCALineCapSquare: 在线段头尾添加半径为线段 lineWidth 一半的矩形”
     
     */
    shapeLayer.lineCap = kCALineCapRound;
    

    //kCALineJoinMiter,    // 尖角
    //kCALineJoinRound,    // 圆角
    //kCALineJoinBevel     // 缺角
    shapeLayer.lineJoin = kCALineJoinRound;
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(self.frame.size.width/4, self.frame.size.height/2)];
    [path addLineToPoint:CGPointMake(self.frame.size.width/2, self.frame.size.height/4*3)];
    [path addLineToPoint:CGPointMake(self.frame.size.width/4*3, self.frame.size.height/3)];
    
    shapeLayer.path = path.CGPath;
    
    [self.layer addSublayer:shapeLayer];
    
    CABasicAnimation *checkani = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    checkani.duration = 1.0;
    checkani.fromValue = @(0);
    checkani.toValue = @(1.0);
    [shapeLayer addAnimation:checkani forKey:@"checkani"];
    
    
}

3 因为gif在线制作只能加5张图片，所以看起来不太好看，项目里看着顺畅。

101554786.gif

4 完整代码

#import 

@interface CheckBtn : UIView

@end

============================================


#import "CheckBtn.h"

#define kWidth self.bounds.size.width

#define kHeight self.bounds.size.height

static CGFloat btnWidth = 100;

@interface CheckBtn()

@end

@implementation CheckBtn

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        
        [self loadUI];
    }
    return self;
}

- (void)loadUI
{
    self.backgroundColor = [UIColor greenColor];
    
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapAction)];
    [self addGestureRecognizer:tap];
}

- (void)layoutSubviews
{
    [super layoutSubviews];
    
    self.layer.cornerRadius = kHeight/2.0;
    
}

- (void)tapAction
{
  

    
    //一边切圆角一边修改bouse
    CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
    animation1.toValue = @(btnWidth/2.0);
    
    CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"bounds"];
    animation2.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, btnWidth, btnWidth)];
    
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.delegate = self;
    group.duration = 10.0;
    group.animations = @[animation1,animation2];
    group.removedOnCompletion = NO;
    group.fillMode = kCAFillModeForwards;
    group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    [self.layer addAnimation:group forKey:@"hehe"];
    

    
}


- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    
    CAAnimation *ani = [self.layer animationForKey:@"hehe"];
    
    if ([ani isEqual:anim]) {
       
        self.layer.cornerRadius = btnWidth/2.0;
        self.bounds = CGRectMake(0, 0, btnWidth, btnWidth);
        
        [self checkAnimaltion];
    }
    
    
}

- (void)checkAnimaltion
{
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.lineWidth = 10;
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    /**
     lineCap
     
     kCALineCapButt: 默认格式，不附加任何形状;
     kCALineCapRound: 在线段头尾添加半径为线段 lineWidth 一半的半圆；
     kCALineCapSquare: 在线段头尾添加半径为线段 lineWidth 一半的矩形”
     
     */
    shapeLayer.lineCap = kCALineCapRound;
    

    //kCALineJoinMiter,    // 尖角
    //kCALineJoinRound,    // 圆角
    //kCALineJoinBevel     // 缺角
    shapeLayer.lineJoin = kCALineJoinRound;
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(self.frame.size.width/4, self.frame.size.height/2)];
    [path addLineToPoint:CGPointMake(self.frame.size.width/2, self.frame.size.height/4*3)];
    [path addLineToPoint:CGPointMake(self.frame.size.width/4*3, self.frame.size.height/3)];
    
    shapeLayer.path = path.CGPath;
    
    [self.layer addSublayer:shapeLayer];
    
    CABasicAnimation *checkani = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    checkani.duration = 10.0;
    checkani.fromValue = @(0);
    checkani.toValue = @(1.0);
    [shapeLayer addAnimation:checkani forKey:@"checkani"];
    
    
}

@end

=================================

#import "ViewController.h"
#import "CheckBtn.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    CheckBtn *cheakbtn = [[CheckBtn alloc]init];
    cheakbtn.frame = CGRectMake(100, 100, 130, 50);
    cheakbtn.center = self.view.center;
    [self.view addSubview:cheakbtn];
    
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end