iOS 局部跑马灯效果实现

前言

开发时有一个需求是实现跑马灯效果,其实跑马灯还是比较容易实现的,但是这个是一个局部范围的跑马灯,平时使用的都是全屏幕长度的跑马灯,经过一番折腾,找的了重点,下面这句代码就是我们实现局部的关键。

@property(nonatomic) BOOL clipsToBounds; // When YES, content and subviews are clipped to the bounds of the view. Default is NO.

效果图

iOS 局部跑马灯效果实现_第1张图片
未命名.gif

代码

//.h
#import 

@interface HHRunLabelView : UIView
//字体颜色
@property (nonatomic, strong) UIColor *textColor;

//字体大小
@property (nonatomic, strong) UIFont *font;

//要显示的内容
@property (nonatomic, strong) NSString *text;

/**
 移动的速度[0~1],默认是0.2
 */
@property (nonatomic, assign) CGFloat speed;

@end


//.m
#import "HHRunLabelView.h"

@interface HHRunLabelView()
@property (nonatomic, assign) CGFloat offsetX; //x偏移量
@property (nonatomic, strong) UILabel *moveLabel;
@property (nonatomic, assign) CGFloat labelWidth; //label的宽度
@end

@implementation HHRunLabelView

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]){
        _speed = 0.2;//默认值
        [self initView];
        [self initTimer];
    }
    return self;
}

- (void)initView{
    _moveLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
    [self addSubview:_moveLabel];
}

//初始化timer
- (void)initTimer{
    CADisplayLink *timer = [CADisplayLink displayLinkWithTarget:self selector:@selector(displayLabelAction)];
    timer.frameInterval = 2.0;
    [timer addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];
}

- (void)setTextColor:(UIColor *)textColor{
    _moveLabel.textColor = textColor;
}

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

//设置速度
- (void)setSpeed:(CGFloat)speed{
    if (speed < 0) {
        speed = 0;
    }else if (speed > 1){
        speed = 1;
    }
    _speed = speed*5;
}

//赋值text
- (void)setText:(NSString *)text{
    _moveLabel.text = text;
    [_moveLabel sizeToFit];
    CGRect rect = _moveLabel.frame;
    rect.size.height = self.frame.size.height;
    _moveLabel.frame = rect;
    _offsetX = _moveLabel.frame.origin.x;
    self.clipsToBounds = YES;//设置了这个属性后才能局部显示
}

- (void)displayLabelAction{
    
    _labelWidth = self.moveLabel.frame.size.width;
    if (_labelWidth < self.frame.size.width) return;//如果字能显示全则不移动
    
    CGRect rect = self.moveLabel.frame;
    _offsetX -= self.speed;
    rect.origin.x = _offsetX;
    self.moveLabel.frame = rect;
    if (_offsetX < -_labelWidth){
        _offsetX = self.frame.size.width; //重置起点
    }
}

用法

//导入头文件后加载
 HHRunLabelView *runLabel = [[HHRunLabelView alloc] initWithFrame:CGRectMake(10, 100, 100, 50)];
    runLabel.backgroundColor = [UIColor grayColor];
    runLabel.textColor = [UIColor redColor];
    runLabel.speed = 0.5;
    runLabel.text = @"我是一个局部的小跑马灯啊";
    [self.view addSubview:runLabel];

Demo地址github

你可能感兴趣的:(iOS 局部跑马灯效果实现)