iOS 跑马灯 一句话集成

最近闲来无事，做了一个跑马灯的效果，感觉效果还凑合，故和大家分享一下。

至于为什么说一句话，看一下我在ViewController中 初始化跑马灯的Demo：

1 WQLPaoMaView *paoma = [[WQLPaoMaView alloc]initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, 50) withTitle:@"全场卖两块，买啥都两块，两块钱，你买不了吃亏，两块钱，你买不了上当，真正的物有所值。拿啥啥便宜 买啥啥不贵，都两块，买啥都两块，全场卖两块，随便挑，随便选，都两块～～ "];  2   3 [self.view addSubview:paoma];

你只需要在初始化视图时传入视图的frame、要显示的文本即可实现跑马灯的效果了。

然后看一下效果图：

可以点击停止按钮，让文本暂停滚动。点击开始按钮，让文本继续滚动。

在ViewController中需要做的事情很少，那么我们把重点放在自定义的视图中。

自定义的视图

WQLPaoMaView.h文件中：

 1 #import <UIKit/UIKit.h>   2    3 @interface WQLPaoMaView : UIView   4    5 - (instancetype)initWithFrame:(CGRect)frame withTitle:(NSString *)title;   6    7 - (void)start;   8    9 - (void)stop;  10   11 @end

WQLPaoMaView.m文件：

 1 - (instancetype)initWithFrame:(CGRect)frame withTitle:(NSString *)title   2 {   3     self = [super initWithFrame:frame];   4        5     if (self) {   6    7         CGFloat viewHeight = frame.size.height;   8         labelHeight = viewHeight;   9   10         //循环的时间这里取的是4 此数越大速度越快  11         time = title.length/4;  12           13         UILabel *myLable = [[UILabel alloc]init];  14         myLable.text = title;  15         myLable.font = [UIFont systemFontOfSize:16.0f];  16         myLable.backgroundColor = [UIColor orangeColor];  17           18         //计算文本的宽度  19         CGFloat calcuWidth = [self widthForTextString:title height:labelHeight fontSize:16.0f];  20           21         //这两个frame很重要 分别记录的是左右两个label的frame 而且后面也会需要到这两个frame  22         currentFrame = CGRectMake(0, 0, calcuWidth, labelHeight);  23         behindFrame = CGRectMake(currentFrame.origin.x+currentFrame.size.width, 0, calcuWidth, labelHeight);  24           25         myLable.frame = currentFrame;  26         [self addSubview:myLable];  27           28         labelArray  = [NSMutableArray arrayWithObject:myLable];  29           30         //如果文本的宽度大于视图的宽度才开始跑  31         if (calcuWidth>frame.size.width) {  32             UILabel *behindLabel = [[UILabel alloc]init];  33             behindLabel.frame = behindFrame;  34             behindLabel.text = title;  35             behindLabel.font = [UIFont systemFontOfSize:16.0f];  36             behindLabel.backgroundColor = [UIColor orangeColor];  37             [labelArray addObject:behindLabel];  38             [self addSubview:behindLabel];  39             [self doAnimation];  40         }  41     }  42     return self;  43 }  44   45 - (void)doAnimation  46 {  47     //UIViewAnimationOptionCurveLinear是为了让lable做匀速动画  48     [UIView animateWithDuration:time delay:0 options:UIViewAnimationOptionCurveLinear animations:^{  49           50         //取到两个label  51         UILabel *lableOne = labelArray[0];  52         UILabel *lableTwo = labelArray[1];  53           54         //让两个label向左平移  55         lableOne.transform = CGAffineTransformMakeTranslation(-currentFrame.size.width, 0);  56         lableTwo.transform = CGAffineTransformMakeTranslation(-currentFrame.size.width, 0);  57           58     } completion:^(BOOL finished) {  59         //两个label水平相邻摆放 内容一样 label1为初始时展示的 label2位于界面的右侧，未显示出来  60         //当完成动画时，即第一个label在界面中消失，第二个label位于第一个label的起始位置时，把第一个label放置到第二个label的初始位置  61         UILabel *lableOne = labelArray[0];  62         lableOne.transform = CGAffineTransformIdentity;  63         lableOne.frame = behindFrame;  64           65         UILabel *lableTwo = labelArray[1];  66         lableTwo.transform = CGAffineTransformIdentity;  67         lableTwo.frame = currentFrame;  68           69         //在数组中将第一个label放置到右侧，第二个label放置到左侧（因为此时展示的就是labelTwo）  70         [labelArray replaceObjectAtIndex:1 withObject:lableOne];  71         [labelArray replaceObjectAtIndex:0 withObject:lableTwo];  72           73         //递归调用  74         [self doAnimation];  75     }];  76 }

其实跑马灯的核心思想比较好理解，就是创建两个label循环展示。

此外，比较关键的另外两个方法就是跑马灯的开始与结束：

 1 - (void)start   2 {   3     UILabel *lableOne = labelArray[0];   4     [self resumeLayer:lableOne.layer];   5        6     UILabel *lableTwo = labelArray[1];   7     [self resumeLayer:lableTwo.layer];   8        9     isStop = NO;  10   11 }  12   13 - (void)stop  14 {  15     UILabel *lableOne = labelArray[0];  16     [self pauseLayer:lableOne.layer];  17       18     UILabel *lableTwo = labelArray[1];  19     [self pauseLayer:lableTwo.layer];  20       21     isStop = YES;  22 }  23   24 //暂停动画  25 - (void)pauseLayer:(CALayer*)layer  26 {  27     CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];  28       29     layer.speed = 0;  30       31     layer.timeOffset = pausedTime;  32 }  33   34 //恢复动画  35 - (void)resumeLayer:(CALayer*)layer  36 {  37     //当你是停止状态时，则恢复  38     if (isStop) {  39           40         CFTimeInterval pauseTime = [layer timeOffset];  41           42         layer.speed = 1.0;  43           44         layer.timeOffset = 0.0;  45           46         layer.beginTime = 0.0;  47           48         CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil]-pauseTime;  49           50         layer.beginTime = timeSincePause;  51     }  52       53 }

这样就搭建好了整个自定义跑马灯视图。

动画的暂停与开始的实质就是：使用动画，让label滚动，在点击开始时，让动画开始。点击结束时，让动画暂停。

感兴趣的可以去查看完整Demo（附有注释）： https://github.com/Coolll/WQLPaoMaView

欢迎大家提出各种建议和意见，探讨才能成长。