iOS 跑马灯 一句话集成

浏览: 137 发布日期: 2016-09-05 分类: 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

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

来自: http://www.cnblogs.com/520myp1314/p/5109626.html

返回顶部