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 <UIKit/UIKit.h>
@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()<CAAnimationDelegate>
@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
