自定义Button animation
00.gif
创建 LTNButton，继承自UIView；重写 initWithFrame:；再添加button
- (instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
_shapeLayer = [self drawMask:frame.size.height * 0.5];
_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:@"Z S K" forState:UIControlStateNormal];
[_button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[_button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];
_button.titleLabel.font = [UIFont systemFontOfSize:15.f];
[self addSubview:_button];
[self.layer addSublayer:self.maskLayer];
}
return self;
}
- (CAShapeLayer *)drawMask:(CGFloat)radius {
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.frame = self.bounds;
shapeLayer.path = [self drawBezierPath:radius].CGPath;
return shapeLayer;
}
-(UIBezierPath *)drawBezierPath:(CGFloat)radius {
CGFloat radius_new = HEIGHT * 0.5 - 2;
CGFloat y = WIDTH - radius;
CGFloat x = radius;
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
bezierPath.lineJoinStyle = kCGLineJoinRound;
bezierPath.lineCapStyle = kCGLineCapRound;
[bezierPath addArcWithCenter:CGPointMake(y, HEIGHT * 0.5) radius:radius_new startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:YES];
[bezierPath addArcWithCenter:CGPointMake(x, HEIGHT * 0.5) radius:radius_new startAngle:M_PI_2 endAngle:-M_PI_2 clockwise:YES];
[bezierPath closePath];
return bezierPath;
}
做完这些，将得到
01.png
接下来逐步添加 button 点击动画
- (void)buttonClick:(UIButton *)sender {
CAShapeLayer *circleLayer = [CAShapeLayer layer];
circleLayer.position = CGPointMake(WIDTH * 0.5, HEIGHT * 0.5);
circleLayer.fillColor = [UIColor whiteColor].CGColor;
circleLayer.path = [self drawCircleBezierPath:0].CGPath;
[self.layer addSublayer:circleLayer];
//动画：画出来的圆 radius 从 0 到 (HEIGHT - 10 * 2) * 0.5
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
animation.duration = 0.5;
animation.toValue = (__bridge id _Nullable)([self drawCircleBezierPath:(HEIGHT - 10 * 2) * 0.5].CGPath);
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
[circleLayer addAnimation:animation forKey:@"cicrleAnimation"];
_circleLayer = circleLayer;
[self performSelector:@selector(nextAnimation) withObject:self afterDelay:animation.duration];
}
- (UIBezierPath *)drawCircleBezierPath:(CGFloat)radius {
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
[bezierPath addArcWithCenter:CGPointZero radius:radius startAngle:0 endAngle:M_PI * 2 clockwise:YES];
return bezierPath;
}
01.gif
圆扩大两倍 同时 变透明
- (void)nextAnimation {
_circleLayer.fillColor = [UIColor clearColor].CGColor;
_circleLayer.strokeColor = [UIColor whiteColor].CGColor;
_circleLayer.lineWidth = 10;
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
animation.duration = 0.15;
animation.toValue = (__bridge id _Nullable)([self drawCircleBezierPath:HEIGHT - 10 * 2].CGPath);
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"opacity"];
animation1.beginTime = 0.10;
animation1.duration = 0.15;
animation1.toValue = @0;
animation1.removedOnCompletion = NO;
animation1.fillMode = kCAFillModeForwards;
CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
groupAnimation.fillMode = kCAFillModeForwards;
groupAnimation.removedOnCompletion = NO;
groupAnimation.duration = animation1.beginTime + animation1.duration;
groupAnimation.animations = @[animation, animation1];
[_circleLayer addAnimation:groupAnimation forKey:@"nextAnimation"];
[self performSelector:@selector(startMaskAnimation) withObject:self afterDelay:groupAnimation.duration];
}
02.gif
添加一层半透明膜
-(CAShapeLayer *)maskLayer {
if (!_maskLayer) {
_maskLayer = [CAShapeLayer layer];
_maskLayer.opacity = 0;
_maskLayer.fillColor = [UIColor whiteColor].CGColor;
_maskLayer.path = [self drawBezierPath:WIDTH * 0.5].CGPath;
}
return _maskLayer;
}
- (void)startMaskAnimation {
_maskLayer.opacity = 0.15;
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
animation.duration = 0.25;
animation.toValue = (__bridge id _Nullable)([self drawBezierPath:self.frame.size.height * 0.5].CGPath);
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
[self.maskLayer addAnimation:animation forKey:@"startMaskAnimation"];
[self performSelector:@selector(dismissAnimation) withObject:self afterDelay:animation.duration];
}
03.gif
layer 在中心点缩小成同高度的圆，同时透明度到0
- (void)dismissAnimation {
[self removeSubViews];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
animation.duration = 0.15;
animation.toValue = (__bridge id _Nullable)([self drawBezierPath:WIDTH * 0.5].CGPath);
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"opacity"];
animation1.beginTime = 0.10;
animation1.duration = 0.15;
animation1.toValue = @0;
animation1.removedOnCompletion = NO;
animation1.fillMode = kCAFillModeForwards;
CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
groupAnimation.animations = @[animation,animation1];
groupAnimation.duration = animation1.beginTime + animation1.duration;
groupAnimation.removedOnCompletion = NO;
groupAnimation.fillMode = kCAFillModeForwards;
[_shapeLayer addAnimation:groupAnimation forKey:@"dismissAnimation"];
[self performSelector:@selector(loadAnimation) withObject:self afterDelay:groupAnimation.duration];
}
- (void)removeSubViews {
[_button removeFromSuperview];
[_maskLayer removeFromSuperlayer];
[_circleLayer removeFromSuperlayer];
}
04.gif
模拟载入旋转动画
-(CAShapeLayer *)loadingLayer {
if (!_loadingLayer) {
_loadingLayer = [CAShapeLayer layer];
_loadingLayer.position = CGPointMake(WIDTH/2, HEIGHT/2);
_loadingLayer.fillColor = [UIColor clearColor].CGColor;
_loadingLayer.strokeColor = [UIColor whiteColor].CGColor;
_loadingLayer.lineWidth = 2;
_loadingLayer.path = [self drawLoadingBezierPath].CGPath;
}
return _loadingLayer;
}
- (UIBezierPath *)drawLoadingBezierPath {
UIBezierPath *path = [UIBezierPath bezierPath];
CGFloat radius = HEIGHT * 0.5 - 2;
[path addArcWithCenter:CGPointZero radius:radius startAngle:M_PI/2 endAngle:M_PI/2+M_PI/2 clockwise:YES];
return path;
}
- (void)loadAnimation {
[self.layer addSublayer:self.loadingLayer];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
animation.duration = 0.5;
animation.fromValue = @(0);
animation.toValue = @(M_PI * 2);
animation.repeatCount = LONG_MAX;
[self.loadingLayer addAnimation:animation forKey:@"loadAnimation"];
[self performSelector:@selector(removeAllAnimation) withObject:self afterDelay:animation.duration + 2];
}
05.gif
动画结束，后续 block
- (void)removeAllAnimation {
[self removeSubViews];
[_loadingLayer removeFromSuperlayer];
if (self.translateBlock) {
self.translateBlock();
}
}