登录按键的动态效果的封装和实现

2017-5-19 王建伟 iOS开发

登录按键的动态效果的封装和实现

一个简单的登陆按键所具备的动态效果，第一是启动，第二是成功登录，第三是登录失败

首先创建一个SPShapeLayer的类，用来描述登录按键启动后中间运转的动画，如下图所示

/ 创建／ -(instancetype)initWithFrame:(CGRect)frame{ if(self=[super init]){ CGFloat radius = (CGRectGetHeight(frame) / 2) * 0.5; self.frame = CGRectMake(0, 0, CGRectGetHeight(frame), CGRectGetHeight(frame)); CGPoint center = CGPointMake(CGRectGetHeight(frame) / 2, CGRectGetMidY(self.bounds)); CGFloat startAngle = 0 - M_PI_2; CGFloat endAngle = M_PI * 2 - M_PI_2; BOOL clockwise = true; self.path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:clockwise].CGPath; self.fillColor = nil; self.strokeColor = [UIColor whiteColor].CGColor; self.lineWidth = 1; self.strokeEnd = 0.4; self.hidden = true; } return self; } ／动画启动／ -(void)animation{ self.hidden = false; CABasicAnimation *rotate = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; rotate.fromValue = 0; rotate.toValue = @(M_PI * 2); rotate.duration = 0.4; rotate.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; rotate.repeatCount = HUGE; rotate.fillMode = kCAFillModeForwards; rotate.removedOnCompletion = false; [self addAnimation:rotate forKey:rotate.keyPath]; } ／动画停止／ -(void)stopAnimation{ self.hidden = true; [self removeAllAnimations]; }

做好了准备工作现在需要创建一个按键SPButton类，这个类需要封装启动，成功登录，和登录失败3个方法还需要一个方法来移除所有的动态效果

-(void)spbuttonDidBeginAction;

-(void)spbuttonDidBeginAction{ WGSelf; [UIView animateWithDuration:0.3 delay:0 usingSpringWithDamping:0.5f initialSpringVelocity:0.0f options:UIViewAnimationOptionLayoutSubviews animations:^{ weakSelf.transform=CGAffineTransformMakeScale(1, 1); } completion:^(BOOL finished) { }]; [_spshapeLayer animation]; CABasicAnimation *shrinkAnim = [CABasicAnimation animationWithKeyPath:@"bounds.size.width"]; shrinkAnim.fromValue = @(CGRectGetWidth(self.bounds)); shrinkAnim.toValue = @(CGRectGetHeight(self.bounds)); shrinkAnim.duration = 0.1; shrinkAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; shrinkAnim.fillMode = kCAFillModeForwards; shrinkAnim.removedOnCompletion = NO; [self.layer addAnimation:shrinkAnim forKey:shrinkAnim.keyPath]; self.userInteractionEnabled=NO; }

-(void)spbuttonSuccessEndAction;

-(void)spbuttonSuccessEndAction{ [_spshapeLayer stopAnimation]; CABasicAnimation *expandAnim = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; expandAnim.fromValue = @(1.0); expandAnim.toValue = @(33.0); expandAnim.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.95 :0.02 :1 :0.05]; expandAnim.duration = 0.3; expandAnim.fillMode = kCAFillModeForwards; expandAnim.removedOnCompletion = false; expandAnim.delegate=self; [self.layer addAnimation:expandAnim forKey:expandAnim.keyPath]; }

-(void)spbuttonfaileEndAction;

-(void)spbuttonfaileEndAction{ CABasicAnimation *shrinkAnim = [CABasicAnimation animationWithKeyPath:@"bounds.size.width"]; shrinkAnim.fromValue = @(CGRectGetHeight(self.bounds)); shrinkAnim.toValue = @(CGRectGetWidth(self.bounds)); shrinkAnim.duration = 0.1; shrinkAnim.timingFunction =[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear] ; shrinkAnim.fillMode = kCAFillModeForwards; shrinkAnim.removedOnCompletion = false; CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animationWithKeyPath:@"position"]; CGPoint point = self.layer.position; keyFrame.values = @[[NSValue valueWithCGPoint:CGPointMake(point.x, point.y)], [NSValue valueWithCGPoint:CGPointMake(point.x - 10, point.y)], [NSValue valueWithCGPoint:CGPointMake(point.x + 10, point.y)], [NSValue valueWithCGPoint:CGPointMake(point.x - 10, point.y)], [NSValue valueWithCGPoint:CGPointMake(point.x + 10, point.y)], [NSValue valueWithCGPoint:CGPointMake(point.x - 10, point.y)], [NSValue valueWithCGPoint:CGPointMake(point.x + 10, point.y)], [NSValue valueWithCGPoint:point]]; keyFrame.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; keyFrame.duration = 0.5f; self.layer.position = point; [self.layer addAnimation:keyFrame forKey:keyFrame.keyPath]; [self.layer addAnimation:shrinkAnim forKey:shrinkAnim.keyPath]; [_spshapeLayer stopAnimation]; self.userInteractionEnabled=YES; }

-(void)spbuttonStopAction;

-(void)spbuttonStopAction{ [self.layer removeAllAnimations]; self.userInteractionEnabled=YES; }

封装好这些功能后，发现假如用户登录成功，成功动画结束后需要回调一个函数来通知调用者进行下一步动作

这边创建一个block块来实现这个功能，typedef void (^SuccessAction)();然后监测成功动画结束，执行block

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{ CABasicAnimation *cab = (CABasicAnimation *)anim; if ([cab.keyPath isEqualToString:@"transform.scale"]) { if (_successAction) { _successAction(); } } }

这样一个简单的登录按键就封装完成了，使用后类似于下图效果：

网站备案号：京ICP备11043289号-1 北京市公安局网络备案 海1101084571

版权所有 北京育灵童科技发展有限公司 Copyright © 2002-2024 www.elight.cn, All Rights Reserved