概述

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

详细

一、准备工作

1、需要Xcode8开发环境

2、本例支持iOS8+

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

二、如何使用

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

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

代码如下:

效果如下:

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

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

效果如下:

此外,我在代码里增加了对当前倒计时状态的监听,提供两种方式,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(@"倒计时结束");
}];

效果如下:

三、实现思路

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

#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大师发表,拒绝转载,转载需要作者授权

iOS任何界面全屏炫酷倒计时,一句代码就够了的更多相关文章

  1. 炫酷:一句代码实现标题栏、导航栏滑动隐藏。ByeBurger库的使用和实现

    本文已授权微信公众号:鸿洋(hongyangAndroid)原创首发. 其实上周五的时候已经发过一篇文章.基本实现了底部导航栏隐藏的效果.但是使用起来可能不是很实用.因为之前我实现的方式是继承了系统的 ...

  2. WPF解决界面全屏化但不遮挡任务栏的问题

    原文:WPF解决界面全屏化但不遮挡任务栏的问题 学习C#有一段时间了,现在跟着做项目,碰到有个客户端界面总是全屏,对于客户来说没有任务栏很不习惯,所以做了些略微的修改   </pre>&l ...

  3. 用javascript写Android和iOS naitve应用,实在炫酷。

    关注NativeScript有一段时间了,说好了的三月发第一个Beta版,终于发布了. // declare the extended NativeScriptActivity functionali ...

  4. ios滑动手势全屏(这段代码实现了下一级控制器滑到上一级控制器)

    在自定义导航控制器里面加以下代码就增加全屏滑动手势 >推向前一个控制器 //  HBNavigationController.m // #import "HBNavigationCon ...

  5. JS 取消iOS播放自动全屏:

    iOS下浏览器模式下h5播放器强制是全屏的,除非在app下才可以非全屏播放,需要两个配置: (1)播放器添加参数: playsinline:true(我使用的是阿里云的播放器,其他的需要自己找找是那个 ...

  6. iOS - 视频播放处理全屏/横屏时候遇见的坑

    视频播放想要全屏,使用shouldAutorotate方法禁止主界面,tabbar控制器横屏,导致push进入播放页面不能横屏的问题... - (BOOL)shouldAutorotate { ret ...

  7. HTML5新标签video在iOS上默认全屏播放

    今天做一个app时发现一个问题,应用html5中的video标签加载视频,在Android手机上默认播放大小,但是换成iPhone手机上出问题了,默认弹出全屏播放,查找了好多论坛,都没有谈论这个的.然 ...

  8. html-----vedio标签(HTML5新标签VIDEO在IOS上默认全屏播放)

    今天做一个app时发现一个问题,应用html5中的video标签加载视频,在Android手机上默认播放大小,但是换成iPhone手机上出问题了,默认弹出全屏播放,查找了好多论坛,都没有谈论这个的.然 ...

  9. 炫酷实用的CSS3代码垂直手风琴菜单

    今天在微博上看到别人分享的代码,自己拿来自己保存着. 代码效果如下: 下面是源码: index.html <!DOCTYPE html> <html > <head> ...

随机推荐

  1. UIView 精要概览(持续更新)

    --1-- 知识点:为UIView 设置圆角 前提:layer 属性需要 <QuartzCore/QuartzCore.h> 静态库的支持,所以需要提前导入到项目中,并在你的文件中包含#i ...

  2. Oracle中索引的使用 索引性能优化调整

    索引是由Oracle维护的可选结构,为数据提供快速的访问.准确地判断在什么地方需要使用索引是困难的,使用索引有利于调节检索速度. 当建立一个索引时,必须指定用于跟踪的表名以及一个或多个表列.一旦建立了 ...

  3. Derby安装,创建数据库,在Java程序中使用Derby

    1,下载并安装Derby: 下载地址:http://db.apache.org/derby /derby_downloads.html,下载最新版本. 我用的是10.5.3.0. 解压缩到任意文件夹, ...

  4. Leader之重

    1:合理安排每个CASE并检查每个人每天的工作进度和质量: 这会让一个庞大的工作,或者看上不可能完成的任务,变成可完成的.   2:警惕对立情绪,并寻找交接者: 永远无法控制所有成员对你或者对团队对公 ...

  5. go语言基础之随机数的使用

    1.随机数的使用 示例1:   如果种子参数一样,每次运行程序产生的随机数都一样 package main //必须有个main包 import "fmt" import &quo ...

  6. WKT

    WKT - 概念 WKT(Well-known text)是一种文本标记语言,用于表示矢量几何对象.空间参照系统及空间参照系统之间的转换.它的二进制表示方式,亦即WKB(well-known bina ...

  7. AS .ignore插件 忽略文件

    AS自带的.ignore文件 在AS中新建项目时,默认会创建一个.ignore文件,其中默认忽略的是 *.iml .gradle /local.properties /.idea/workspace. ...

  8. jqGrid常用属性和方法介绍

    jqGrid API中文手册:http://blog.mn886.net/jqGrid/ 一.jqGrid属性: width:Grid的宽度,如果未设置,则宽度应为所有列宽的之和:如果设置了宽度,则每 ...

  9. 如何使用动画和精灵表单 Cocos2d-x 2.1.4

            本文实践自 Ray Wenderlich.Tony Dahbura 的文章< How to Use Animations and Sprite Sheets in Cocos2D ...

  10. (转)U3D不同平台载入XML文件的方法——IOS MAC Android

    自:http://www.cnblogs.com/sifenkesi/archive/2012/03/12/2391330.html 在PC上和IOS上读取XML文件的方式略有差别,经测试,IOS上不 ...