iOS任何界面全屏炫酷倒计时,一句代码就够了

概述

iOS全屏炫酷倒计时,任何界面只需要调用一句代码就能实现,支持定制倒计时数字、倒计时结束时显示的文本、支持倒计时播放图片、开始倒计时和结束倒计时的block和delegate回调、支持定制文本颜色,大小。

详细

一、准备工作

1、需要Xcode8开发环境

2、本例支持iOS8+

3、本例实现的功能:一句代码在任何界面实现一个全屏倒计时

二、如何使用

这是我的工程结构,把箭头指向的文件夹拖入你的工程

15C83F37-9BCE-4B46-9ED1-FE139F7797FA.png

然后需在你的工程中用到的地方倒入头文件#import "WZBCountdownButton.h",在需要开始倒计时的地方使用[WZBCountdownButton play]然后按command + R运行即可!

代码如下:

AF61802D-76F6-4B24-A409-AB888DBF8ECE.png

效果如下:

Untitled.gif

因为+play方法默认执行倒计时3秒,如果想定制倒计时时间,请使用[WZBCountdownLabel playWithNumber:5];效果如下:

Untitled1.gif

有的需求可能是这样:在倒计时结束后我想实现一句话,请使用[WZBCountdownLabel playWithNumber:5 endTitle:@"GO!"];

效果如下:

Untitled2.gif



此外,我在代码里增加了对当前倒计时状态的监听,提供两种方式,block和代理。方法一是你可以通过实现一下两个block来监听倒计时状态:

/** 倒计时完成时调的block */
typedef void(^CountdownSuccessBlock)(WZBCountDownButton *button);
/** 倒计时开始时调的block */
typedef void(^CountdownBeginBlock)(WZBCountDownButton *button);

或者通过[WZBCountdownButton addDelegate:self]; 添加代理,然后实现一下两个代理方法

/** 倒计时完成时调用 */
- (void)countdownSuccess:(WZBCountDownButton *)button
{
    NSLog(@"倒计时完成");
}

/** 倒计时开始时调用 */
- (void)countdownBegin:(WZBCountDownButton *)button
{
    NSLog(@"倒计时开始");
}

除此之外,我还定义了方法,可以倒计时图片,就是把一堆图片,一秒一个的播放,如下:

[WZBCountDownButton playWithImages:imageNames begin:^(WZBCountDownButton *button) {
        NSLog(@"倒计时开始");
    } success:^(WZBCountDownButton *button) {
        NSLog(@"倒计时结束");
    }];

效果如下:

Untitled3.gif


三、实现思路

以下是几个开始倒计时的方法:

#pragma mark - play methods
+ (instancetype)play {
    return [self playWithNumber:0];
}

+ (instancetype)playWithNumber:(NSInteger)number {
    return [self playWithNumber:number endTitle:[WZBCountDownButton share].endTitle];
}

+ (instancetype)playWithNumber:(NSInteger)number endTitle:(NSString *)endTitle {
    return [self playWithNumber:number endTitle:endTitle success:[WZBCountDownButton share].countdownSuccessBlock];
}

+ (instancetype)playWithNumber:(NSInteger)number success:(CountdownSuccessBlock)success {
    return [self playWithNumber:number endTitle:[WZBCountDownButton share].endTitle success:success];
}

+ (instancetype)playWithNumber:(NSInteger)number endTitle:(NSString *)endTitle success:(CountdownSuccessBlock)success{
    return [self playWithNumber:number endTitle:endTitle begin:[WZBCountDownButton share].countdownBeginBlock success:success];
}

上面这几个方法最终都会走到下边这个方法,核心代码

+ (instancetype)playWithNumber:(NSInteger)number endTitle:(NSString *)endTitle begin:(CountdownBeginBlock)begin success:(CountdownSuccessBlock)success {
    // isAnimationing 用来判断目前是否在动画
    if (isAnimationing) return nil;
    WZBCountDownButton *button = [WZBCountDownButton share];
    [button setImage:[UIImage new] forState:UIControlStateNormal];
    button.countDownType = WZBCountDownNumber;
    button.hidden = NO;
    // 给全局属性赋值
    // 默认三秒
    button.number = 3;
    if (number && number > 0) button.number = number;
    if (endTitle) button.endTitle = endTitle;
    if (success) button.countdownSuccessBlock = success;
    if (begin) button.countdownBeginBlock = begin;
    
    [self setupButtonBase:button];
    
    // 动画倒计时部分
    [self scaleActionWithBeginBlock:begin andSuccessBlock:success button:button];
    return button;
}


// 动画倒计时部分
+ (void)scaleActionWithBeginBlock:(CountdownBeginBlock)begin andSuccessBlock:(CountdownSuccessBlock)success button:(WZBCountDownButton *)button {
    if (!isAnimationing) { // 如果不在动画, 才走开始的代理和block
        if (begin) begin(button);
        if ([button.delegate respondsToSelector:@selector(countdownBegin:)]) [button.delegate countdownBegin:button];
    }
    
    if (button.countDownType == WZBCountDownImage) {
        [self setAnimationImage:button];
    } else {
        [self setAnimationNumber:button];
    }
}

// 播放倒计时图片
+ (void)setAnimationImage:(WZBCountDownButton *)button {
    if (button.images.count > 0) {
        isAnimationing = YES;
        [button setImage:[UIImage imageNamed:button.images.firstObject] forState:UIControlStateNormal];
        [UIView animateWithDuration:1.0f animations:^{
            button.transform = CGAffineTransformIdentity;
            button.alpha = 1;
        } completion:^(BOOL finished) {
            if (finished) {
                button.alpha = 0;
                button.transform = CGAffineTransformMakeScale(5, 5);
                if (button.images.count > 0) {
                    [button.images removeObjectAtIndex:0];
                    [self scaleActionWithBeginBlock:button.countdownBeginBlock andSuccessBlock:button.countdownSuccessBlock button:button];
                }
            }
        }];
    } else {
        // 调用倒计时完成的代理和block
        if ([button.delegate respondsToSelector:@selector(countdownSuccess:)]) [button.delegate countdownSuccess:button];
        
        if (button.countdownSuccessBlock) button.countdownSuccessBlock(button);
        [self hidden];
    }
}

简单解释下代码的实现原理:

调用这个方法,首先先判断当前是否正在播放倒计时,如果正在播放,直接return nil;

如果没有在播放,则创建一个UIButton,然后为button赋值(一些全局变量),如果是数字倒计时,那么为button赋值为初始的数字,然后再判断有没有结束语,如果有,则总倒计时增加一秒钟(为最后的结束语留一秒播放时间)。然后判断总数值是否大于0,如果不大于,则证明已经播放完了,然后调用代理和block,以及隐藏掉self。如果判断大于0,则开始开始循环播放动画,这里用的是UIView动画,每次动画执行1秒,动画执行结束,控制全局数值的number属性减一,重新开始循环上边步骤。

如果是倒计时图片,则开始走播放倒计时图片的方法,先判断外部传入的图片数组个数是否大于0,如果不大于,则证明已经倒计时结束了(或者使用者没有传入任何图片),然后调用代理和block,以及隐藏self。如果图片个数大于0,从图片数组中取出第一个图片为button赋值,然后开始动画,动画执行完,先把数组中的第一张图片移除掉,然后重新开始上边的步骤。知道执行结束为止。


此demo中其他可用的方法:

/**
 设置文字颜色和字体大小

 @param textColor 文字颜色(默认红色)
 @param textFont 字体大小(默认为20)
 */
+ (void)setTextColor:(UIColor *)textColor textFont:(UIFont *)textFont;

/**
 设置文字颜色
 
 @param textColor 文字颜色(默认红色)
 */
+ (void)setTextColor:(UIColor *)textColor;

/**
 设置字体大小
 
 @param textFont 字体大小(默认为20)
 */
+ (void)setTextFont:(UIFont *)textFont;

/**
 全是默认值的play方法
 */
+ (instancetype)play;

/**
 隐藏
 */
+ (void)hidden;

/**
 初始化并开始播放

 @param number 倒计时开始数字
 @return WZBCountDownButton的实例
 */
+ (instancetype)playWithNumber:(NSInteger)number;

/**
 初始化并开始播放

 @param number 倒计时开始数字
 @param endTitle 倒计时结束时显示的字符
 @return WZBCountDownButton的实例
 */
+ (instancetype)playWithNumber:(NSInteger)number endTitle:(NSString *)endTitle;

/**
 初始化并开始播放

 @param number 倒计时开始数字
 @param success 倒计时开始回调
 @return WZBCountDownButton的实例
 */
+ (instancetype)playWithNumber:(NSInteger)number success:(CountdownSuccessBlock)success;

/**
 初始化并开始播放

 @param number 倒计时开始数字
 @param endTitle 倒计时结束时显示的字符
 @param success 倒计时开始回调
 @return WZBCountDownButton的实例
 */
+ (instancetype)playWithNumber:(NSInteger)number endTitle:(NSString *)endTitle success:(CountdownSuccessBlock)success;

/**
 初始化并开始播放

 @param number 倒计时开始数字
 @param endTitle 倒计时结束时显示的字符
 @param begin 倒计时开始回调
 @param success 倒计时完成回调
 @return WZBCountDownButton的实例
 */
+ (instancetype)playWithNumber:(NSInteger)number endTitle:(NSString *)endTitle begin:(CountdownBeginBlock)begin success:(CountdownSuccessBlock)success;

/**
 初始化并开始播放

 @param images 需要播放的图片
 @param begin 倒计时开始回调
 @param success 倒计时完成回调
 @return WZBCountDownButton的实例
 */
+ (instancetype)playWithImages:(NSArray *)images begin:(CountdownBeginBlock)begin success:(CountdownSuccessBlock)success;

/**
 初始化并开始播放

 @param images 需要播放的图片
 @param duration 时间间隔(暂未实现)
 @param begin 倒计时开始回调
 @param success 倒计时完成回调
 @return WZBCountDownButton的实例
 */
+ (instancetype)playWithImages:(NSArray *)images duration:(NSTimeInterval)duration begin:(CountdownBeginBlock)begin success:(CountdownSuccessBlock)success;

/**
 绑定代理
 */
+ (void)addDelegate:(id<WZBCountDownButtonDelegate>)delegate;

/**
 倒计时完成时的block监听
 */
+ (void)addCountdownSuccessBlock:(CountdownSuccessBlock)success;

/**
 倒计时开始时的block监听
 */
+ (void)addCountdownBeginBlock:(CountdownBeginBlock)begin;

/**
 倒计时开始时和结束时的block监听
 */
+ (void)addCountdownBeginBlock:(CountdownBeginBlock)begin successBlock:(CountdownSuccessBlock)success;

这些方法的注视都比较清楚,就不再过多解释了。具体请下载demo。

四、其他

以上介绍了基本的使用方法,在文件WZBCountDownButton.h中还有一些其他的一些操作,比如定制文字颜色、文字大小这些,比较简单,就不过多赘述了。我这个demo的功能很简单,但是封装的特别好,没有一个实例方法,全是直接拿类名可以直接调用的类方法,很值得学习一下。

注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
(优化版)由于苹果官方对iOS系统后台任务管控非常严格,所以在iOS系统要实现倒计时进入后台或者切换页面之后依然能保持倒计时状态会比较繁琐或困难,但倒计时按钮是经常用到、司空见惯!经常看到不太友好的倒计时按钮表现为,倒计时并未完成但当你切换页面或者进入后台后按钮倒计时失效并又可以点击了,实际上没有达到限制1~2分钟后才可点击的效果。于是我琢磨下封装了这个倒计时按钮的SDK它能解决上述问题并完美达到预期效果,而且SDK支持代码创建、XIB创建,使用也非常简单。注意这个SDK只能在真机上面跑,不能在xcode模拟器上面跑,因为时间匆忙没有做模拟器兼容SDK,请在真机上面使用SDK,下次有时间再更新。 SDK提供有比较灵活的属性控制,可修改倒计时按钮背景颜色、文字颜色、按钮圆角大小、点击时背景颜色,基本能满足全部UI设计需求。请下载资源包里面提供了SDK的用法截图、Demo、SDK(务必注意看看 5张SDK使用说明图片) 用法: 请直接把“SDK”文件夹拖到您的项目中,然后安照demo代码应用SDK即可,不明白请联系我们 注意1: 项目中有多个倒计时按钮,那么必须给按钮“indexsButtonLDS”设置不同的标识符(任意字符串),否则会出现异常。代码或者XIB方式设置indexsButtonLDS请参考代码,比较简单的(如果不明白仔细看下Demo) 注意2: 倒计时最长为180秒(因受iOS系统限制),超过180秒会无效。通常倒计时按钮都是限制2分钟吧。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值