酷应用

iOS 跑马灯的实现

百家作者：iOS开发 2018-11-28 13:05:47

程序君个人微信

和我聊聊编程和创业的事

加好友

作者丨劉光軍_Shine
https://www.jianshu.com/p/1cdb3e6a9d80

介绍

我们一说起跑马灯第一个想到的就是：山寨机。接下来介绍的跑马灯和那个跑马灯是不一样滴。在iOS中，跑马灯是指label上的字自动滚动，形成类似跑马灯似的条幅。像这样子：

接下来就简单看看这效果是怎么实现的。

实现

1.思路

首先我们从这个图片里面能联想到如果实现这个效果必然需要使用到动画，或者还有有用scrollView的思路，这里我是用的动画的方式实现的。

2.h文件

自定义一个继承UIView的LGJAutoRunLabel类，在.h文件中：

@class LGJAutoRunLabel;

typedef NS_ENUM(NSInteger, RunDirectionType) {
    LeftType = 0,
    RightType = 1,
};

@protocol LGJAutoRunLabelDelegate < NSObject>

@optional
- (void)operateLabel: (LGJAutoRunLabel *)autoLabel animationDidStopFinished: (BOOL)finished;

@end

@interface LGJAutoRunLabel : UIView

@property (nonatomic, weak) id  delegate;
@property (nonatomic, assign) CGFloat speed;
@property (nonatomic, assign) RunDirectionType directionType;

- (void)addContentView: (UIView *)view;
- (void)startAnimation;
- (void)stopAnimation;

定义一个NS_ENUM用来判断自动滚动的方向，分别是左和右，声明一个可选类型的协议，用来在controller中调用并对autoLabel进行操作。声明对外的属性和方法。这里一目了然，主要的实现思路都集中在.m文件中。

3、.m文件

声明“私有”变量和属性：

@interface LGJAutoRunLabel()< CAAnimationDelegate>
{
    CGFloat _width;
    CGFloat _height;
    CGFloat _animationViewWidth;
    CGFloat _animationViewHeight;
    BOOL _stoped;
    UIView *_contentView;//滚动内容视图
}
@property (nonatomic, strong) UIView *animationView;//放置滚动内容视图
@end

初始化方法：

- (instancetype)initWithFrame:(CGRect)frame {

    if (self == [super initWithFrame:frame]) {
        _width = frame.size.width;
        _height = frame.size.height;

        self.speed = 1.0f;
        self.directionType = LeftType;
        self.layer.masksToBounds = YES;
        self.animationView = [[UIView alloc] initWithFrame:CGRectMake(_width, 0, _width, _height)];
        [self addSubview:self.animationView];
    }
    return self;
}

将滚动内容视图contentView添加到动画视图animationView上：

- (void)addContentView:(UIView *)view {

    [_contentView removeFromSuperview];
    view.frame = view.bounds;
    _contentView = view;
    self.animationView.frame = view.bounds;
    [self.animationView addSubview:_contentView];

    _animationViewWidth = self.animationView.frame.size.width;
    _animationViewHeight = self.animationView.frame.size.height;
}

让animationView上的contentView自动滚动起来的主要方法在这儿，重点来了，就是这个- (void)startAnimation方法，看一下这个方法里面是怎么样实现的：

- (void)startAnimation {
    [self.animationView.layer removeAnimationForKey:@"animationViewPosition"];
    _stoped = NO;

    CGPoint pointRightCenter = CGPointMake(_width + _animationViewWidth / 2.f, _animationViewHeight / 2.f);
    CGPoint pointLeftCenter  = CGPointMake(-_animationViewWidth / 2, _animationViewHeight / 2.f);
    CGPoint fromPoint        = self.directionType == LeftType ? pointRightCenter : pointLeftCenter;
    CGPoint toPoint          = self.directionType == LeftType ? pointLeftCenter  : pointRightCenter;

    self.animationView.center = fromPoint;
    UIBezierPath *movePath    = [UIBezierPath bezierPath];
    [movePath moveToPoint:fromPoint];
    [movePath addLineToPoint:toPoint];

    CAKeyframeAnimation *moveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    moveAnimation.path                 = movePath.CGPath;
    moveAnimation.removedOnCompletion  = YES;
    moveAnimation.duration             = _animationViewWidth / 30.f * (1 / self.speed);
    moveAnimation.delegate             = self;
    [self.animationView.layer addAnimation:moveAnimation forKey:@"animationViewPosition"];
}

↘️首先先把animationView.layer上的动画移除掉，接下来就是要找到animationViewcontentView的pointCenter这里把这个中点当做是animationView或者是contentView都行，因为这两个视图的frame是相等的，这步找左右中点的意义在于，完全显示出文字内容，因为可能会遇到那种比如文字太长了，view长度不够，不能完全显示出来文字的全部内容。

这里我们找到中点，也就相当于确定了内容视图要滑动的范围了，接下来根据起始方向的枚举值设置fromPoint和toPoint这里我们默认是从右向左滚动的。这里我们做动画设置，用到了贝塞尔曲线，我们设置UIBezierPath的起始位置就是fromPoint也就是屏幕右方（我们看不见）self.animationView.center。

终止位置是屏幕左方toPoint此时animationView滚动的起始位置的首和终止位置的尾的距离正好是屏幕的宽度。这里我们使用CAKeyframeAnimation关键帧动画，moveAnimation.path = movePath.CGPath;，moveAnimation.removedOnCompletion = YES;动画完成后就将动画移除，不保留最终的状态。[self.animationView.layer addAnimation:moveAnimation forKey:@"animationViewPosition"];将动画添加到animationView.layer上。

（这段是对上面代码的解释）

-------------------分割线-------------------

接下来的这个就是代理方法的实现了，当动画完成后悔调用LGJAutoRunLabelDelegate我们自定义的delegate方法。

- (void)stopAnimation {
    _stoped = YES;
    [self.animationView.layer removeAnimationForKey:@"animationViewPosition"];
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
    if (self.delegate && [self.delegate respondsToSelector:@selector(operateLabel:animationDidStopFinished:)]) {
        [self.delegate operateLabel:self animationDidStopFinished:flag];
    }
    if (flag && !_stoped) {
        [self startAnimation];
    }
}

4、在controller中使用方法

主要的方法就是声明LGJAutoRunLabel实例，将代理设为自身，声明directionType默认为Left，在runLabel上创建label也就是我们看到的文字。其余方法一目了然了。

//MARK:- CreateAutoRunLabel
- (void)createAutoRunLabel {
    LGJAutoRunLabel *runLabel = [[LGJAutoRunLabel alloc] initWithFrame:CGRectMake(0, 100, kWidth, 50)];
    runLabel.delegate = self;
    runLabel.directionType = LeftType;
    [self.view addSubview:runLabel];
    [runLabel addContentView:[self createLabelWithText:@"繁华声 遁入空门 折煞了梦偏冷 辗转一生 情债又几 如你默认 生死枯等 枯等一圈 又一圈的 浮图塔 断了几层 断了谁的痛直奔 一盏残灯 倾塌的山门 容我再等 历史转身 等酒香醇 等你弹 一曲古筝" textColor:[self                                                                                                                                                              randomColor] labelFont:[UIFont systemFontOfSize:14]]];
    [runLabel startAnimation];
}

- (UILabel *)createLabelWithText: (NSString *)text textColor:(UIColor *)textColor labelFont:(UIFont *)font {
    NSString *string = [NSString stringWithFormat:@"%@", text];
    CGFloat width = [UILabel getWidthByTitle:string font:font];
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, width, 50)];
    label.font = font;
    label.text = string;
    label.textColor = textColor;
    return label;
}

- (UIColor *)randomColor {
    return [UIColor colorWithRed:[self randomValue] green:[self randomValue] blue:[self randomValue] alpha:1];
}

- (CGFloat)randomValue {
    return arc4random()%255 / 255.0f;
}

总结

这个例子挺小的，主要思路就是利用动画将其变活，可能不太好理解的地方就是在动画移动的path这个路径的距离上，我们想这个路径的时候肯定要这样想，我让动画从最初我看不见的地方出现，然后最后到我看不见的地方消失，这个中间的距离之差就是屏幕的宽度了，而这个屏幕的宽度正好我们可以用contentView.frame来表示。

推荐↓↓↓