iOS~自带loading动画的登陆按钮

移动开发 来源:爱上别的吧 67℃ 0评论
闲来无事造个轮子,之前无意间看到一个酷炫的登陆按钮,点击之后会缩成一团旋转,loading完成后再展开,于是自己试着模仿了一下,效果图如下

loading.gif

一.思路

动画可以拆分为三部分:
1.将矩形按钮缩成圆型,首先隐藏title,然后改变按钮的frame为位于中心点的以原有高度为边长正方形,最后裁切圆角,达到效果。
2.旋转圆形按钮,首先需要添加一个白色小弧线,可以采用CAShapeLayer实现,然后让按钮绕Z轴旋转,可以采用CABasicAnimation实现。
3.将圆形按钮展开成矩形,首先还原按钮的frame,然后还原圆角,最后显示title。

二.核心代码

1.对外接口

#import <UIKit/UIKit.h>

typedef void (^CallBack)();

@interface VDLoadingButton : UIButton

/**
 初始化VDLoadingButton

 @param frame 按钮的frame
 @param backgroundColor 按钮的背景颜色
 @param title 按钮的文字
 @param titleColor 文字颜色
 @param titleFont 文字字体大小
 @param cornerRadius 按钮圆角半径
 @param clickBlock 按钮点击之后执行的代码块
 @return 初始化完成的VDLoadingButton
 */
+ (instancetype)VDLoadingButtoninitWithFrame:(CGRect)frame andBackgroundColor:(UIColor *)backgroundColor andTitle:(NSString *)title andTitleColor:(UIColor *)titleColor andTitleFont:(UIFont *)titleFont andCornerRadius:(CGFloat)cornerRadius andClickBlock:(CallBack)clickBlock;

/**
 停止VDLoadingButton的动画

 @param callBack 动画停止之后执行的代码块
 */
- (void)stopAnimateAndCallBack:(CallBack)callBack;

@end

2.动画实现

- (void)loginButtonDidClick {

    //禁用用户交互
    self.userInteractionEnabled = NO;
    //隐藏title
    [self setTitleColor:[UIColor clearColor] forState:UIControlStateNormal];
    //执行代码块
    self.clickBlock();

    //开始动画
    [UIView animateWithDuration:1.0 delay:0 usingSpringWithDamping:0.8 initialSpringVelocity:0.8 options:UIViewAnimationOptionLayoutSubviews animations:^{

        //1.将矩形按钮缩成圆型
        //改变圆角
        self.layer.cornerRadius = self.deframe.size.height / 2.0;
        self.layer.masksToBounds = YES;
        //改变frame
        self.frame = CGRectMake(([UIScreen mainScreen].bounds.size.width - self.frame.size.height) / 2.0, self.frame.origin.y, self.frame.size.height, self.frame.size.height);
    } completion:^(BOOL finished) {

        //添加小弧线
        [self.layer addSublayer:self.leftShape];
        //显示小弧线
        self.leftShape.hidden = NO;

        //2.旋转圆形按钮
        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
        animation.toValue = @(M_PI * 7000);
        animation.duration = 1000;
        animation.beginTime = 0;
        animation.fillMode = kCAFillModeBoth;
        [self.layer addAnimation:animation forKey:nil];
    }];
}

- (void)stopAnimateAndCallBack:(CallBack)callBack {

    //移除旋转动画
    [self.layer removeAllAnimations];
    //隐藏小弧线
    self.leftShape.hidden = YES;

    //开始动画
    [UIView animateWithDuration:1.0 delay:0 usingSpringWithDamping:0.8 initialSpringVelocity:0.8 options:UIViewAnimationOptionLayoutSubviews animations:^{

        //3.将圆形按钮展开成矩形
        //恢复最初圆角
        self.layer.cornerRadius = self.cornerRadius;
        self.layer.masksToBounds = YES;
        //恢复最初frame
        self.frame = self.deframe;
        //显示title
        [self setTitleColor:self.titleColor forState:UIControlStateNormal];
    } completion:^(BOOL finished) {

        //开启用户交互
        self.userInteractionEnabled = YES;
        //执行代码块
        callBack();
    }];
}
三.源码

源码放在了github上,欢迎指正,觉得不错的star一下呀!

关闭

IT问道推荐

银行贷款频频被拒?
“Dr信用牛牛”让你远离信用污点 国内首家信用健康管理平台免费为你提供信用修复方案