iOS 滚动显示文字

跑马灯效果滚动显示文字

在网上搜了好多跑马灯效果都能实现，但是看了具体的代码，感觉好复杂的样子，因为很小的一个功能，还要用到scollView啊，定时器什么的。
这里来一个最简单的，代码量最少的实现。就不会让你觉得为啥一个文字滚动这么麻烦。

• 效果图

4.gif

• 简单的说呢就是用CAKeyframeAnimation来实现文字的滚动。

• 上代码

• 在.h里面放几个属性 待会重写它的set方法

#import <UIKit/UIKit.h>

@interface TCScrollTextView : UIView

@property (nonatomic, assign) CGFloat speed;
@property (nonatomic, copy) NSString * text;
@property (nonatomic, strong) UIFont * font;

@end

• 在自定义的这个view里面放个显示文本的label

#import "TCScrollTextView.h"

@interface TCScrollTextView ()

@property (nonatomic, strong) UILabel * contentLabel;

@end

@implementation TCScrollTextView

- (void)dealloc {
    [[NSNotificationCenter defaultCenter] removeObserver:self name:UIApplicationDidBecomeActiveNotification object:nil];
}

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        [self initUI];
    }
    return self;
}

- (void)initUI {
    
    _contentLabel = [[UILabel alloc] init];
    _contentLabel.backgroundColor = [UIColor clearColor];
    [self addSubview:_contentLabel];
    
    //超出部分不显示
    self.layer.masksToBounds = YES;
    //设置默认值
    self.speed = 0.5;
    //解决进入后台然后回来就停了
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(startAnimation) name:UIApplicationDidBecomeActiveNotification object:nil];
}
- (void)startAnimation {
    [self setNeedsLayout];
}

• 现在重写它的字体和赋值方法

- (void)setText:(NSString *)text {
    _text = text;
    _contentLabel.text = text;
    //根据内容得到_contentLabel的frame
    [_contentLabel sizeToFit];
    //居中显示
    CGRect frame = _contentLabel.frame;
    frame.origin.y = (self.bounds.size.height - frame.size.height)/2;
    _contentLabel.frame = frame;

}

- (void)setFont:(UIFont *)font {
    _font = font;
    _contentLabel.font = font;
}

- (void)setSpeed:(CGFloat)speed {
    _speed = speed;
}

• 关键的实现滚动的代码来了

- (void)layoutSubviews {
    [super layoutSubviews];
    
    CGFloat sizeWidth = CGRectGetWidth(_contentLabel.frame);
    
    [self.contentLabel.layer removeAnimationForKey:@"keyFrame"];
    //如果文字能够显示完全 则不用滚动显示
    if (sizeWidth<= self.bounds.size.width) {
        return;
    }
    
    //添加帧动画 实现滚动效果 其实就是改变x的值
    CAKeyframeAnimation* keyFrame = [CAKeyframeAnimation animation];
    keyFrame.keyPath = @"transform.translation.x";
    keyFrame.values = @[@(0), @(-sizeWidth + self.bounds.size.width)];
    keyFrame.repeatCount = NSIntegerMax;
    keyFrame.autoreverses = NO;
    keyFrame.duration =  self.speed * self.contentLabel.text.length*0.8;
//    keyFrame.duration =  12+(1/self.speed) * self.contentLabel.text.length*0.1;
    NSLog(@"layoutSubviews _speed：%f duration:%f lenth:%lu",_speed,keyFrame.duration,self.contentLabel.text.length);
    //滚动速度改变 可以实现滚动速度由慢变快或者由快变慢
//    keyFrame.timingFunctions = @[[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut], [CAMediaTimingFunction functionWithControlPoints:0 :0 :0.5 :0.5]];
    [self.contentLabel.layer addAnimation:keyFrame forKey:@"keyFrame"];

}

使用方法：

    TCScrollTextView * textView = [[TCScrollTextView alloc] initWithFrame:CGRectMake(30, 500, self.view.bounds.size.width-60, 20)];
    textView.speed = 0.5;
    textView.text = @"41岁对大部分球员而言绝对算是超龄服役，但马努的决定还是令许多马刺球迷猝不及防，毕竟他和球队还有一年合同，以他的竞技状态还可以为球队提供场内外急需的能量——尤其是在度过如此风雨飘摇的一个赛季后";
    [self.view addSubview:textView];

顺便看下其他人是怎么实现的吧 ，我看了这几个人的。

1. 小码哥的 https://www.jianshu.com/p/6f4e3caf058d
   我下下来看了，是通过定时器改变里面几个label的frame的x来实现的。
2. 反例,同样的效果却复杂实现了 http://code.cocoachina.com/view/131010
3. 这个功能更多，可以显示几条数据 https://www.cnblogs.com/xjy-123/p/5191011.html
   其余的网上多的很，希望可以自己去找一个自己觉得最好的。或者自己写一个最好的。然后回来告诉我哦。