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文件中：

#import <UIKit/UIKit.h>

@interface WQLPaoMaView : UIView

- (instancetype)initWithFrame:(CGRect)frame withTitle:(NSString *)title;

- (void)start;

- (void)stop;

@end

WQLPaoMaView.m文件：

- (instancetype)initWithFrame:(CGRect)frame withTitle:(NSString *)title
{
    self = [super initWithFrame:frame];
    
    if (self) {

        CGFloat viewHeight = frame.size.height;
        labelHeight = viewHeight;

        //循环的时间这里取的是4 此数越大速度越快
        time = title.length/4;
        
        UILabel *myLable = [[UILabel alloc]init];
        myLable.text = title;
        myLable.font = [UIFont systemFontOfSize:16.0f];
        myLable.backgroundColor = [UIColor orangeColor];
        
        //计算文本的宽度
        CGFloat calcuWidth = [self widthForTextString:title height:labelHeight fontSize:16.0f];
        
        //这两个frame很重要 分别记录的是左右两个label的frame 而且后面也会需要到这两个frame
        currentFrame = CGRectMake(0, 0, calcuWidth, labelHeight);
        behindFrame = CGRectMake(currentFrame.origin.x+currentFrame.size.width, 0, calcuWidth, labelHeight);
        
        myLable.frame = currentFrame;
        [self addSubview:myLable];
        
        labelArray  = [NSMutableArray arrayWithObject:myLable];
        
        //如果文本的宽度大于视图的宽度才开始跑
        if (calcuWidth>frame.size.width) {
            UILabel *behindLabel = [[UILabel alloc]init];
            behindLabel.frame = behindFrame;
            behindLabel.text = title;
            behindLabel.font = [UIFont systemFontOfSize:16.0f];
            behindLabel.backgroundColor = [UIColor orangeColor];
            [labelArray addObject:behindLabel];
            [self addSubview:behindLabel];
            [self doAnimation];
        }
    }
    return self;
}

- (void)doAnimation
{
    //UIViewAnimationOptionCurveLinear是为了让lable做匀速动画
    [UIView animateWithDuration:time delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
        
        //取到两个label
        UILabel *lableOne = labelArray[0];
        UILabel *lableTwo = labelArray[1];
        
        //让两个label向左平移
        lableOne.transform = CGAffineTransformMakeTranslation(-currentFrame.size.width, 0);
        lableTwo.transform = CGAffineTransformMakeTranslation(-currentFrame.size.width, 0);
        
    } completion:^(BOOL finished) {
        //两个label水平相邻摆放 内容一样 label1为初始时展示的 label2位于界面的右侧，未显示出来
        //当完成动画时，即第一个label在界面中消失，第二个label位于第一个label的起始位置时，把第一个label放置到第二个label的初始位置
        UILabel *lableOne = labelArray[0];
        lableOne.transform = CGAffineTransformIdentity;
        lableOne.frame = behindFrame;
        
        UILabel *lableTwo = labelArray[1];
        lableTwo.transform = CGAffineTransformIdentity;
        lableTwo.frame = currentFrame;
        
        //在数组中将第一个label放置到右侧，第二个label放置到左侧（因为此时展示的就是labelTwo）
        [labelArray replaceObjectAtIndex:1 withObject:lableOne];
        [labelArray replaceObjectAtIndex:0 withObject:lableTwo];
        
        //递归调用
        [self doAnimation];
    }];
}

 

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

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

- (void)start
{
    UILabel *lableOne = labelArray[0];
    [self resumeLayer:lableOne.layer];
    
    UILabel *lableTwo = labelArray[1];
    [self resumeLayer:lableTwo.layer];
    
    isStop = NO;

}

- (void)stop
{
    UILabel *lableOne = labelArray[0];
    [self pauseLayer:lableOne.layer];
    
    UILabel *lableTwo = labelArray[1];
    [self pauseLayer:lableTwo.layer];
    
    isStop = YES;
}

//暂停动画
- (void)pauseLayer:(CALayer*)layer
{
    CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];
    
    layer.speed = 0;
    
    layer.timeOffset = pausedTime;
}

//恢复动画
- (void)resumeLayer:(CALayer*)layer
{
    //当你是停止状态时，则恢复
    if (isStop) {
        
        CFTimeInterval pauseTime = [layer timeOffset];
        
        layer.speed = 1.0;
        
        layer.timeOffset = 0.0;
        
        layer.beginTime = 0.0;
        
        CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil]-pauseTime;
        
        layer.beginTime = timeSincePause;
    }
    
}

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

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

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

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

 

针对那位评论说：”CPU的占用率100％“ 的那位同学，特意截一个真机运行的图给你，请好好检查一下代码，全部就只有两个Label，怎么可能占用那么多CPU？全部代码都是可以看到的，望细查你的其它模块的代码。