UILabel 跑马灯、弹幕

1、跑马灯

  • 具体实现代码见 GitHub 源码 QExtension

  • QMarqueeView.h

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    #pragma mark - QMarqueeViewDelegate

    /// 跑马灯内容点击处理协议
    @protocol QMarqueeViewDelegate <NSObject>

    - (void)didClickContentAtIndex:(NSInteger)index;

    @end


    #pragma mark - QMarqueeView

    /// 跑马灯滚动方向枚举
    typedef NS_ENUM(NSUInteger, QMarqueeViewDirection) {
    QMarqueeViewDirectionUp,
    QMarqueeViewDirectionDown,
    QMarqueeViewDirectionLeft,
    QMarqueeViewDirectionRight
    };

    @interface QMarqueeView : UIView

    /// 显示的文本内容
    @property (nonatomic, strong) NSArray *contentTexts;

    /// 显示的文本内容颜色,default is redColor
    @property (nonatomic, strong) UIColor *contentTextColor;

    /// 显示的文本内容字体,default is 15.0
    @property (nonatomic, strong) UIFont *contentTextFont;

    /// 显示的文本内容对齐方式,default is NSTextAlignmentLeft
    @property (nonatomic, assign) NSTextAlignment contentTextAlign;

    /// 显示的图标内容,可以为 nil 不显示图标
    @property (nonatomic, strong) UIImage *contentIcon;

    /// 动画方向,default is QMarqueeViewDirectionUp
    @property (nonatomic, assign) QMarqueeViewDirection animationDirection;

    /// 动画时间,等于 0 时不滚动
    @property (nonatomic, assign) NSTimeInterval animationDuration;

    /// 动画停顿时间,default is 1.0 秒
    @property (nonatomic, assign) NSTimeInterval animationDelay;

    /// 代理
    @property (nonatomic, weak) id<QMarqueeViewDelegate> delegate;

    /**
    * 开始动画
    */
    - (void)q_startAnimation;

    /**
    * 创建跑马灯视图控件,开始滚动
    *
    * @param frame 跑马灯对象的 frame
    * @param texts 显示的文本内容
    * @param color 显示的文本内容颜色,default is redColor
    * @param font 显示的文本内容字体,default is 15.0
    * @param align 显示的文本内容对齐方式,default is NSTextAlignmentLeft
    * @param icon 显示的图片内容
    * @param direction 动画方向,default is QMarqueeViewDirectionUp
    * @param duration 动画时间,等于 0 时不滚动
    * @param delay 动画停顿时间,default is 1.0 秒
    * @param target 代理
    *
    * @return 跑马灯视图控件
    */
    + (instancetype)q_marqueeViewWithFrame:(CGRect)frame
    texts:(NSArray *)texts
    color:(nullable UIColor *)color
    font:(nullable UIFont *)font
    align:(NSTextAlignment)align
    icon:(nullable UIImage *)icon
    direction:(QMarqueeViewDirection)direction
    duration:(NSTimeInterval)duartion
    delay:(NSTimeInterval)delay
    target:(nullable id<QMarqueeViewDelegate>)target;

    @end
  • QMarqueeView.m

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    #define SELF_WIDTH      self.frame.size.width
    #define SELF_HEIGHT self.frame.size.height

    @interface QMarqueeView ()

    /// 两个 label 循环滚动
    @property (nonatomic, strong) UILabel *firstContentLabel;
    @property (nonatomic, strong) UILabel *secondContentLabel;

    /// 显示图片的视图
    @property (nonatomic, strong) UIImageView *imageView;

    /// 当前显示的行
    @property (nonatomic, assign) NSInteger currentIndex;

    /// 文本内容的起始位置、宽度、高度
    @property (nonatomic, assign) CGFloat contentX;
    @property (nonatomic, assign) CGFloat contentWidth;
    @property (nonatomic, assign) CGFloat contentHeight;

    @end

    @implementation QMarqueeView

    /// 创建跑马灯视图控件,开始滚动
    + (instancetype)q_marqueeViewWithFrame:(CGRect)frame
    texts:(NSArray *)texts
    color:(nullable UIColor *)color
    font:(nullable UIFont *)font
    align:(NSTextAlignment)align
    icon:(nullable UIImage *)icon
    direction:(QMarqueeViewDirection)direction
    duration:(NSTimeInterval)duartion
    delay:(NSTimeInterval)delay
    target:(nullable id<QMarqueeViewDelegate>)target {

    QMarqueeView *marqueeView = [[self alloc] initWithFrame:frame];

    marqueeView.contentTexts = texts;
    marqueeView.contentTextColor = color;
    marqueeView.contentTextFont = font;
    marqueeView.contentTextAlign = align;
    marqueeView.contentIcon = icon;
    marqueeView.animationDirection = direction;
    marqueeView.animationDuration = duartion;
    marqueeView.animationDelay = delay;
    marqueeView.delegate = target;

    [marqueeView q_startAnimation];

    return marqueeView;
    }

    /// 创建视图控件
    - (void)setupView {

    // 父视图裁剪
    self.clipsToBounds = YES;

    // 控件之间的间隔值
    CGFloat margin = 10;

    // 判断是否有图标
    if (self.contentIcon) {

    // 添加 Icon 视图
    CGRect iconBackFrame = CGRectMake(0, 0, margin + SELF_HEIGHT, SELF_HEIGHT);
    UIView *iconBackView = [[UIView alloc] initWithFrame:iconBackFrame];
    iconBackView.backgroundColor = [UIColor clearColor];
    [self addSubview:iconBackView];

    CGRect iconFrame = CGRectMake(margin, 0, SELF_HEIGHT, SELF_HEIGHT);
    self.imageView = [[UIImageView alloc] initWithFrame:iconFrame];
    self.imageView.backgroundColor = [UIColor clearColor];
    self.imageView.image = self.contentIcon;
    [iconBackView addSubview:self.imageView];

    // 计算 Texts 的 frame 值
    self.contentX = margin + SELF_HEIGHT;
    self.contentWidth = SELF_WIDTH - self.contentX - margin;

    } else {

    // 计算 Texts 的 frame 值
    self.contentX = margin;
    self.contentWidth = SELF_WIDTH - self.contentX - margin;
    }
    self.contentHeight = SELF_HEIGHT;

    // 创建第一个 label
    CGRect frame1 = CGRectMake(0, 0, self.contentWidth, self.contentHeight);
    self.firstContentLabel = [[UILabel alloc] initWithFrame:frame1];
    [self setLabel:self.firstContentLabel];

    // 创建第二个 label
    if (self.animationDirection <= 1) {

    CGRect frame2 = CGRectMake(0, SELF_HEIGHT, self.contentWidth, self.contentHeight);
    self.secondContentLabel = [[UILabel alloc] initWithFrame:frame2];
    [self setLabel:self.secondContentLabel];
    }
    }

    /// 设置 label 属性
    - (void)setLabel:(UILabel *)label {

    // 设置 label 背景视图
    CGRect frame;
    if (self.contentIcon == nil && self.animationDirection > 1) {
    frame = CGRectMake(0, 0, SELF_WIDTH, self.contentHeight);
    } else {
    frame = CGRectMake(self.contentX, 0, self.contentWidth, self.contentHeight);
    }
    UIView *textBackView = [[UIView alloc] initWithFrame:frame];
    textBackView.backgroundColor = [UIColor clearColor];
    textBackView.clipsToBounds = YES;
    [self addSubview:textBackView];

    // 设置默认值
    UIColor *textColor = self.contentTextColor ? : [UIColor redColor];
    UIFont *textFont = self.contentTextFont ? : [UIFont systemFontOfSize:15.0f];
    NSTextAlignment textAlign = self.contentTextAlign ? : NSTextAlignmentLeft;

    // 设置 label 属性
    label.backgroundColor = [UIColor clearColor];
    label.lineBreakMode = NSLineBreakByTruncatingTail;
    label.textColor = textColor;
    label.font = textFont;
    label.textAlignment = textAlign;
    label.userInteractionEnabled = YES;
    UITapGestureRecognizer *tap1 = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(contentClick)];
    [label addGestureRecognizer:tap1];
    [textBackView addSubview:label];
    }

    /// 开启滚动动画
    - (void)startLoopAnimation {

    // 设置默认值
    NSTimeInterval delay = 0;
    NSTimeInterval duration = 0;
    CGFloat currentContentWidth = self.contentWidth;

    // 设置第一个 label 显示的内容
    self.firstContentLabel.text = self.contentTexts[self.currentIndex];

    // 滚动时间为 0 时,停止滚动
    if (0 == self.animationDuration) {
    return;
    } else {
    if (self.animationDirection > 1) { // 左右滚动

    // 不停顿
    delay = 0;

    // 计算文本内容长度
    currentContentWidth = [self.firstContentLabel.text sizeWithAttributes:@{NSFontAttributeName:(self.contentTextFont ? :
    [UIFont systemFontOfSize:15.0f])}].width;

    duration = self.animationDuration * currentContentWidth / 150;

    } else { // 垂直滚动

    // 动画停顿时间,默认为 1.0 秒
    delay = self.animationDelay ? : 1.0f;

    duration = self.animationDuration;

    // 设置第二个 label 显示的内容
    NSInteger secondCurrentIndex = self.currentIndex + 1;
    if (secondCurrentIndex > self.contentTexts.count - 1) {
    secondCurrentIndex = 0;
    }
    self.secondContentLabel.text = self.contentTexts[secondCurrentIndex];
    }
    }

    CGFloat firstContentLastStartX = 0;
    CGFloat firstContentLastEndX = 0;

    CGFloat firstContentLastStartY = 0;
    CGFloat firstContentLastEndY = 0;
    CGFloat secondContentLastStartY = 0;
    CGFloat secondContentLastEndY = 0;

    // 判断滚动方向
    switch (self.animationDirection) {

    case QMarqueeViewDirectionUp: {

    firstContentLastStartY = 0;
    firstContentLastEndY = -SELF_HEIGHT;

    secondContentLastStartY = firstContentLastStartY + SELF_HEIGHT;
    secondContentLastEndY = firstContentLastEndY + SELF_HEIGHT;

    break;
    }

    case QMarqueeViewDirectionDown: {

    firstContentLastStartY = 0;
    firstContentLastEndY = SELF_HEIGHT;

    secondContentLastStartY = firstContentLastStartY - SELF_HEIGHT;
    secondContentLastEndY = firstContentLastEndY - SELF_HEIGHT;

    break;
    }

    case QMarqueeViewDirectionLeft: {

    firstContentLastStartX = self.contentWidth;
    firstContentLastEndX = -currentContentWidth;

    break;
    }

    case QMarqueeViewDirectionRight: {

    firstContentLastStartX = -currentContentWidth;
    firstContentLastEndX = self.contentWidth;

    break;
    }

    default:
    break;
    }

    // 设置开始时的 frame
    CGRect frame1;
    CGRect frame2;
    if (self.animationDirection > 1) {
    frame1 = CGRectMake(firstContentLastStartX, 0, currentContentWidth, self.contentHeight);
    } else {
    frame1 = CGRectMake(0, firstContentLastStartY, self.contentWidth, self.contentHeight);
    frame2 = CGRectMake(0, secondContentLastStartY, self.contentWidth, self.contentHeight);
    }
    self.firstContentLabel.frame = frame1;
    self.secondContentLabel.frame = frame2;

    // 开始一次滚动动画
    [UIView beginAnimations:@"" context:nil];
    [UIView setAnimationCurve:UIViewAnimationCurveLinear];
    [UIView setAnimationDuration:duration];
    [UIView setAnimationDelay:delay];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(loopAnimationDidStop:finished:context:)];

    // 设置结束时的 frame
    CGRect frame3;
    CGRect frame4;
    if (self.animationDirection > 1) {
    frame3 = CGRectMake(firstContentLastEndX, 0, currentContentWidth, self.contentHeight);
    } else {
    frame3 = CGRectMake(0, firstContentLastEndY, self.contentWidth, self.contentHeight);
    frame4 = CGRectMake(0, secondContentLastEndY, self.contentWidth, self.contentHeight);
    }
    self.firstContentLabel.frame = frame3;
    self.secondContentLabel.frame = frame4;

    // 结束一次滚动动画
    [UIView commitAnimations];
    }

    /// 一次动画结束事件响应处理
    - (void)loopAnimationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {

    self.currentIndex++;
    if (self.currentIndex >= self.contentTexts.count) {
    self.currentIndex = 0;
    }

    // 重新开启滚动动画
    [self startLoopAnimation];
    }

    /// 开始滚动
    - (void)q_startAnimation {

    // 创建视图
    [self setupView];

    // 开启动画默认第一条信息
    self.currentIndex = 0;

    // 开始滚动动画
    [self startLoopAnimation];
    }

    /// 文本内容点击事件处理
    - (void)contentClick {

    if ([self.delegate respondsToSelector:@selector(didClickContentAtIndex:)]) {
    [self.delegate didClickContentAtIndex:self.currentIndex];
    }
    }

    @end
  • 使用

    • 1、初始化

      • QMarqueeView 继承自 UIView, 初始化和 UIView 一样

        1
        2
        3
        4
        5
        6
        7
        8
        9
        // 创建跑马灯视图控件
        CGRect frame = CGRectMake(0, 50, self.view.bounds.size.width, 30);
        QMarqueeView *marqueeView = [[QMarqueeView alloc] initWithFrame:frame];

        // 常规设置,QMarqueeView 继承自 UIView, 设置和 UIView 一样
        marqueeView.layer.cornerRadius = 15;
        marqueeView.layer.masksToBounds = YES;
        marqueeView.backgroundColor = [[UIColor grayColor] colorWithAlphaComponent:0.5];
        [self.view addSubview:marqueeView];
      • 也可以使用类方法一体式创建设置

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        // 创建滚动视图,开始滚动
        CGRect frame = CGRectMake(30, 250, self.view.bounds.size.width - 100, 30);
        QMarqueeView *marqueeView = [QMarqueeView q_marqueeViewWithFrame:frame
        texts:showList
        color:[UIColor whiteColor]
        font:nil
        align:NSTextAlignmentLeft
        icon:[UIImage imageNamed:@"waring1"]
        direction:QMarqueeViewDirectionDown
        duration:1.0
        delay:0
        target:self];
        [self.view addSubview:marqueeView];
    • 2、设置显示的文本内容

      • 文本内容存放到数组中设置

        1
        2
        3
        4
        5
        6
        7
        8
        // 设置显示的内容
        NSArray *showList = @[@"1. Hello World",
        @"2. 欢迎大家关注哦!",
        @"3. GitHub:QianChia",
        @"4. 新浪微博:QianChia0123",
        @"5. 个人博客:cnblogs.com/QianChia"];

        marqueeView.contentTexts = showList;
      • 文本内容可选属性设置,可以设置文本内容的颜色、字体、及对齐方式

        1
        2
        3
        4
        5
        6
        7
        8
        // 显示的文本内容颜色,default is redColor
        marqueeView.contentTextColor = [UIColor whiteColor];

        // 显示的文本内容字体,default is 15.0
        marqueeView.contentTextFont = [UIFont boldSystemFontOfSize:18];

        // 显示的文本内容对齐方式,default is NSTextAlignmentLeft
        marqueeView.contentTextAlign = NSTextAlignmentCenter;
    • 3、设置显示的图标内容

      • 除显示文本内容外,还可以可选设置显示左侧图标

        1
        2
        // 显示的图标内容,可以为 nil 不显示图标
        marqueeView.contentIcon = [UIImage imageNamed:@"waring1"];
    • 4、设置动画时间

      • 动画时间等于 0 时不进行滚动

        1
        2
        // 设置动画时间
        marqueeView.animationDuration = 5.0;
    • 5、设置动画方向

      • 不设置时默认向上滚动

        1
        2
        // 设置动画方向,default is QMarqueeViewDirectionUp
        marqueeView.animationDirection = QMarqueeViewDirectionRight;
    • 6、设置动画停顿时间

      • 一次动画滚动完成后可以设置停顿时间,不设置时默认为 1.0 秒

        1
        2
        // 设置动画停顿时间,default is 1.0 秒
        marqueeView.animationDelay = 2.0;
    • 7、设置点击回调代理

      • 点击显示的内容时可以可选设置响应代理

        1
        2
        // 设置代理,响应滚动视图点击
        marqueeView.delegate = self;
    • 8、开始滚动动画

      • 添加设置完成后,开启动画

        1
        2
        // 开始动画
        [marqueeView q_startAnimation];

1.1 垂直滚动

  • 1、垂直滚动,左侧对齐

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    // 创建跑马灯视图控件
    CGRect frame = CGRectMake(0, 50, self.view.bounds.size.width, 30);
    QMarqueeView *marqueeView = [[QMarqueeView alloc] initWithFrame:frame];

    // 设置显示的内容
    NSArray *showList = @[@"1. Hello World",
    @"2. 欢迎大家关注哦!",
    @"3. GitHub:QianChia",
    @"4. 新浪微博:QianChia0123",
    @"5. 个人博客:cnblogs.com/QianChia"];

    marqueeView.contentTexts = showList;
    marqueeView.contentTextColor = [UIColor whiteColor];
    marqueeView.contentTextFont = [UIFont boldSystemFontOfSize:18];

    // 设置动画时间
    marqueeView.animationDuration = 0.2;

    // 常规设置
    marqueeView.backgroundColor = [UIColor colorWithRed:102/255.0f green:133/255.0f blue:253/255.0f alpha:1];
    [self.view addSubview:marqueeView];

    // 开始滚动
    [marqueeView q_startAnimation];
    • 效果

      Label1

  • 2、垂直滚动,中间对齐

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    // 创建跑马灯视图控件
    CGRect frame = CGRectMake(0, 50, self.view.bounds.size.width, 30);
    QMarqueeView *marqueeView = [[QMarqueeView alloc] initWithFrame:frame];

    // 设置显示的内容
    NSArray *showList = @[@"1. Hello World",
    @"2. 欢迎大家关注哦!",
    @"3. GitHub:QianChia",
    @"4. 新浪微博:QianChia0123",
    @"5. 个人博客:cnblogs.com/QianChia"];

    marqueeView.contentTexts = showList;
    marqueeView.contentTextColor = [UIColor whiteColor];
    marqueeView.contentTextFont = [UIFont boldSystemFontOfSize:18];

    // 设置动画时间
    marqueeView.animationDuration = 0.2;

    // 设置显示的内容对齐方式
    marqueeView.contentTextAlign = NSTextAlignmentCenter;

    // 常规设置
    marqueeView.backgroundColor = [UIColor colorWithRed:102/255.0f green:133/255.0f blue:253/255.0f alpha:1];
    [self.view addSubview:marqueeView];

    // 开始滚动
    [marqueeView q_startAnimation];
    • 效果

      Label2

  • 3、垂直滚动,带图标

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    // 创建跑马灯视图控件
    CGRect frame = CGRectMake(30, 150, self.view.bounds.size.width - 150, 30);
    QMarqueeView *marqueeView = [[QMarqueeView alloc] initWithFrame:frame];

    // 设置显示的内容
    NSArray *showList = @[@"GitHub:QianChia"];
    marqueeView.contentTexts = showList;
    marqueeView.contentTextColor = [UIColor whiteColor];

    // 设置显示的图标
    marqueeView.contentIcon = [UIImage imageNamed:@"waring1"];

    // 设置动画时间
    marqueeView.animationDuration = 0.5;

    // 常规设置
    marqueeView.layer.cornerRadius = 15;
    marqueeView.layer.masksToBounds = YES;
    marqueeView.backgroundColor = [UIColor colorWithRed:102/255.0f green:133/255.0f blue:253/255.0f alpha:1];
    [self.view addSubview:marqueeView];

    // 开始滚动
    [marqueeView q_startAnimation];
    • 效果

      Label3 Label4

  • 4、垂直滚动,向下滚动

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    // 创建跑马灯视图控件
    CGRect frame = CGRectMake(30, 200, self.view.bounds.size.width - 150, 30);
    QMarqueeView *marqueeView = [[QMarqueeView alloc] initWithFrame:frame];

    // 设置显示的内容
    NSArray *showList = @[@"GitHub:QianChia"];
    marqueeView.contentTexts = showList;
    marqueeView.contentTextColor = [UIColor whiteColor];
    marqueeView.contentIcon = [UIImage imageNamed:@"waring1"];

    // 设置动画时间
    marqueeView.animationDuration = 0.5;

    // 设置动画方向
    marqueeView.animationDirection = QMarqueeViewDirectionDown;

    // 常规设置
    marqueeView.layer.cornerRadius = 15;
    marqueeView.layer.masksToBounds = YES;
    marqueeView.backgroundColor = [UIColor colorWithRed:102/255.0f green:133/255.0f blue:253/255.0f alpha:1];
    [self.view addSubview:marqueeView];

    // 开始滚动
    [marqueeView q_startAnimation];
    • 效果

      Label5 Label6

  • 5、垂直滚动,由类方法创建

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    // 设置显示的内容
    NSArray *showList = @[@"1. Hello World",
    @"2. 欢迎大家关注哦!",
    @"3. GitHub:QianChia",
    @"4. 新浪微博:QianChia0123",
    @"5. 个人博客:cnblogs.com/QianChia"];

    // 创建跑马灯视图控件,开始滚动
    CGRect frame = CGRectMake(30, 250, self.view.bounds.size.width - 100, 30);
    QMarqueeView *marqueeView = [QMarqueeView q_marqueeViewWithFrame:frame
    texts:showList
    color:[UIColor whiteColor]
    font:nil
    align:NSTextAlignmentLeft
    icon:[UIImage imageNamed:@"waring1"]
    direction:QMarqueeViewDirectionDown
    duration:1.0
    delay:0
    target:self];

    // 常规设置
    marqueeView.layer.cornerRadius = 15;
    marqueeView.layer.masksToBounds = YES;
    marqueeView.backgroundColor = [[UIColor grayColor] colorWithAlphaComponent:0.5];
    [self.view addSubview:marqueeView];
    • 效果

      Label7 Label8

1.2 水平滚动

  • 1、水平滚动,向左滚动

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    // 创建跑马灯视图控件
    CGRect frame = CGRectMake(50, 350, self.view.bounds.size.width - 100, 30);
    QMarqueeView *marqueeView = [[QMarqueeView alloc] initWithFrame:frame];

    // 设置显示的内容
    NSArray *showList = @[@"1. Hello World",
    @"2. 欢迎大家关注哦!",
    @"3. GitHub:QianChia",
    @"4. 新浪微博:QianChia0123",
    @"5. 个人博客:cnblogs.com/QianChia"];

    marqueeView.contentTexts = showList;
    marqueeView.contentTextColor = [UIColor whiteColor];
    marqueeView.contentTextFont = [UIFont boldSystemFontOfSize:18];
    marqueeView.contentIcon = [UIImage imageNamed:@"waring1"];

    // 设置动画时间
    marqueeView.animationDuration = 5.0;

    // 设置动画方向
    marqueeView.animationDirection = QMarqueeViewDirectionLeft;

    // 常规设置
    marqueeView.layer.cornerRadius = 15;
    marqueeView.layer.masksToBounds = YES;
    marqueeView.backgroundColor = [UIColor colorWithRed:102/255.0f green:133/255.0f blue:253/255.0f alpha:1];
    [self.view addSubview:marqueeView];

    // 开始滚动
    [marqueeView q_startAnimation];
    • 效果

      Label9 Label10

  • 2、水平滚动,向右滚动

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    // 创建跑马灯视图控件
    CGRect frame = CGRectMake(50, 400, self.view.bounds.size.width - 100, 30);
    QMarqueeView *marqueeView = [[QMarqueeView alloc] initWithFrame:frame];

    // 设置显示的内容
    NSArray *showList = @[@"1. Hello World",
    @"2. 欢迎大家关注哦!",
    @"3. GitHub:QianChia",
    @"4. 新浪微博:QianChia0123",
    @"5. 个人博客:cnblogs.com/QianChia"];

    marqueeView.contentTexts = showList;
    marqueeView.contentTextColor = [UIColor whiteColor];
    marqueeView.contentTextFont = [UIFont boldSystemFontOfSize:18];
    marqueeView.contentIcon = [UIImage imageNamed:@"waring1"];

    // 设置动画时间
    marqueeView.animationDuration = 5.0;

    // 设置动画方向
    marqueeView.animationDirection = QMarqueeViewDirectionRight;

    // 常规设置
    marqueeView.layer.cornerRadius = 15;
    marqueeView.layer.masksToBounds = YES;
    marqueeView.backgroundColor = [UIColor colorWithRed:102/255.0f green:133/255.0f blue:253/255.0f alpha:1];
    [self.view addSubview:marqueeView];

    // 开始滚动
    [marqueeView q_startAnimation];
    • 效果

      Label11 Label12

  • 3、水平滚动,由类方法创建

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    // 设置显示的内容
    NSArray *showList = @[@"1. Hello World",
    @"2. 欢迎大家关注哦!",
    @"3. GitHub:QianChia",
    @"4. 新浪微博:QianChia0123",
    @"5. 个人博客:cnblogs.com/QianChia"];

    // 创建跑马灯视图控件,开始滚动
    CGRect frame = CGRectMake(30, 450, self.view.bounds.size.width - 60, 30);
    QMarqueeView *marqueeView = [QMarqueeView q_marqueeViewWithFrame:frame
    texts:showList
    color:nil
    font:nil
    align:0
    icon:[UIImage imageNamed:@"waring2"]
    direction:QMarqueeViewDirectionLeft
    duration:4.0
    delay:0
    target:self];

    // 常规设置
    marqueeView.layer.cornerRadius = 15;
    marqueeView.layer.masksToBounds = YES;
    marqueeView.backgroundColor = [[UIColor grayColor] colorWithAlphaComponent:0.5];
    [self.view addSubview:marqueeView];
    • 效果

      Label13

2、弹幕

  • 具体实现代码见 GitHub 源码 QExtension

  • QBulletScreenView.h

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    #pragma mark - QBulletScreenViewDelegate

    /// 跑马灯内容点击处理协议
    @protocol QBulletScreenViewDelegate <NSObject>

    - (void)didClickContentAtIndex:(NSInteger)index;

    @end


    #pragma mark - QBulletScreenView

    /// 弹幕滚动方向枚举
    typedef NS_ENUM(NSUInteger, QBulletScreenViewDirection) {
    QBulletScreenViewDirectionUp,
    QBulletScreenViewDirectionDown,
    QBulletScreenViewDirectionLeft,
    QBulletScreenViewDirectionRight
    };

    @interface QBulletScreenView : UIView

    /// 显示的文本内容
    @property (nonatomic, strong) NSArray *contentTexts;

    /// 显示的文本内容颜色,default is redColor
    @property (nonatomic, strong) UIColor *contentTextColor;

    /// 显示的文本内容字体,default is 15.0
    @property (nonatomic, strong) UIFont *contentTextFont;

    /// 显示的图标内容,可以为 nil 不显示图标
    @property (nonatomic, strong) UIImage *contentIcon;

    /// 动画方向,default is QBulletScreenViewDirectionLeft
    @property (nonatomic, assign) QBulletScreenViewDirection animationDirection;

    /// 动画时间,等于 0 时不滚动
    @property (nonatomic, assign) NSTimeInterval animationDuration;

    /// 代理
    @property (nonatomic, weak) id<QBulletScreenViewDelegate> delegate;

    /**
    * 开始动画
    */
    - (void)q_startAnimation;

    /**
    * 创建弹幕视图控件
    *
    * @param frame 跑马灯对象的 frame
    * @param texts 显示的文本内容
    * @param color 显示的文本内容颜色,default is redColor
    * @param font 显示的文本内容字体,default is 15.0
    * @param icon 显示的图片内容
    * @param direction 动画方向,default is QMarqueeViewDirectionUp
    * @param duration 动画时间,等于 0 时不滚动
    * @param target 代理
    *
    * @return 弹幕视图控件
    */
    + (instancetype)q_bulletScreenWithFrame:(CGRect)frame
    texts:(NSArray *)texts
    color:(nullable UIColor *)color
    font:(nullable UIFont *)font
    icon:(nullable UIImage *)icon
    direction:(QBulletScreenViewDirection)direction
    duration:(NSTimeInterval)duartion
    target:(nullable id<QBulletScreenViewDelegate>)target;

    @end
  • QBulletScreenView.m

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    #define SELF_WIDTH      self.frame.size.width
    #define SELF_HEIGHT self.frame.size.height

    @interface QBulletScreenView ()

    /// label
    @property (nonatomic, strong) UILabel *contentLabel;

    /// 显示图片的视图
    @property (nonatomic, strong) UIImageView *imageView;

    /// 当前显示的行
    @property (nonatomic, assign) NSInteger currentIndex;

    /// 文本内容的起始位置、宽度、高度
    @property (nonatomic, assign) CGFloat contentX;
    @property (nonatomic, assign) CGFloat contentWidth;
    @property (nonatomic, assign) CGFloat contentHeight;

    /// 弹幕视图的位置、宽度、高度
    @property (nonatomic, assign) CGFloat viewX;
    @property (nonatomic, assign) CGFloat viewY;
    @property (nonatomic, assign) CGFloat viewWidth;
    @property (nonatomic, assign) CGFloat viewHeight;

    @end

    @implementation QBulletScreenView

    /// 创建弹幕视图控件
    + (instancetype)q_bulletScreenWithFrame:(CGRect)frame
    texts:(NSArray *)texts
    color:(nullable UIColor *)color
    font:(nullable UIFont *)font
    icon:(nullable UIImage *)icon
    direction:(QBulletScreenViewDirection)direction
    duration:(NSTimeInterval)duartion
    target:(nullable id<QBulletScreenViewDelegate>)target {

    QBulletScreenView *bulletScreenView = [[self alloc] initWithFrame:frame];

    bulletScreenView.contentTexts = texts;
    bulletScreenView.contentTextColor = color;
    bulletScreenView.contentTextFont = font;
    bulletScreenView.contentIcon = icon;
    bulletScreenView.animationDirection = direction;
    bulletScreenView.animationDuration = duartion;
    bulletScreenView.delegate = target;

    return bulletScreenView;
    }

    /// 创建视图控件
    - (void)setupView {

    // 父视图裁剪
    self.clipsToBounds = YES;

    // 控件之间的间隔值
    CGFloat margin = 10;

    // 判断是否有图标
    if (self.contentIcon) {

    // 添加 Icon 视图
    CGRect iconFrame = CGRectMake(margin, 0, SELF_HEIGHT, SELF_HEIGHT);
    self.imageView = [[UIImageView alloc] initWithFrame:iconFrame];
    self.imageView.backgroundColor = [UIColor clearColor];
    self.imageView.image = self.contentIcon;
    [self addSubview:self.imageView];

    // 计算 Texts 的 frame 值
    self.contentX = margin + SELF_HEIGHT;
    self.contentWidth = SELF_WIDTH - self.contentX - margin;

    } else {

    // 计算 Texts 的 frame 值
    self.contentX = margin * 2;
    self.contentWidth = SELF_WIDTH - self.contentX - margin;
    }
    self.contentHeight = SELF_HEIGHT;
    self.viewHeight = SELF_HEIGHT;

    // 设置默认值
    UIColor *textColor = self.contentTextColor ? : [UIColor redColor];
    UIFont *textFont = self.contentTextFont ? : [UIFont systemFontOfSize:15.0f];

    // 创建 label
    CGRect frame1 = CGRectMake(self.contentX, 0, self.contentWidth, self.contentHeight);
    self.contentLabel = [[UILabel alloc] initWithFrame:frame1];
    self.contentLabel.backgroundColor = [UIColor clearColor];
    self.contentLabel.lineBreakMode = NSLineBreakByTruncatingTail;
    self.contentLabel.textColor = textColor;
    self.contentLabel.font = textFont;
    self.contentLabel.userInteractionEnabled = YES;
    UITapGestureRecognizer *tap1 = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(contentClick)];
    [self.contentLabel addGestureRecognizer:tap1];
    [self addSubview:self.contentLabel];
    }

    /// 开启滚动动画
    - (void)startLoopAnimation {

    // 控件之间的间隔值
    CGFloat margin = 10;

    // 设置默认值
    NSTimeInterval duration = 0;
    CGFloat currentContentWidth = self.contentWidth;

    // 设置第一个 label 显示的内容
    self.contentLabel.text = self.contentTexts[self.currentIndex];

    // 滚动时间为 0 时,停止滚动
    if (0 == self.animationDuration) {
    return;
    } else {

    // 计算文本内容长度
    currentContentWidth = [self.contentLabel.text sizeWithAttributes:@{NSFontAttributeName:(self.contentTextFont ? :
    [UIFont systemFontOfSize:15.0f])}].width;

    CGRect frame = CGRectMake(self.contentX, 0, currentContentWidth, self.contentHeight);
    self.contentLabel.frame = frame;

    self.viewWidth = self.contentX + currentContentWidth + margin * 2;

    if (self.animationDirection > 1) { // 左右滚动
    duration = self.animationDuration * currentContentWidth / 150;
    } else { // 垂直滚动
    duration = self.animationDuration;
    }
    }

    CGFloat viewLastStartX = 0;
    CGFloat viewLastEndX = 0;

    CGFloat viewLastStartY = 0;
    CGFloat viewLastEndY = 0;

    // 判断滚动方向
    switch (self.animationDirection) {

    case QBulletScreenViewDirectionUp: {

    viewLastStartY = self.superview.bounds.size.height;
    viewLastEndY = -self.viewHeight;

    break;
    }

    case QBulletScreenViewDirectionDown: {

    viewLastStartY = -self.viewHeight;
    viewLastEndY = self.superview.bounds.size.height;

    break;
    }

    case QBulletScreenViewDirectionLeft: {

    viewLastStartX = self.superview.bounds.size.width;
    viewLastEndX = -self.viewWidth;

    break;
    }

    case QBulletScreenViewDirectionRight: {

    viewLastStartX = -self.viewWidth;
    viewLastEndX = self.superview.bounds.size.width;

    break;
    }

    default:
    break;
    }

    self.viewX = self.frame.origin.x;
    self.viewY = self.frame.origin.y;

    // 设置开始时的 frame
    CGRect frame1;
    if (self.animationDirection > 1) {
    frame1 = CGRectMake(viewLastStartX, self.viewY, self.viewWidth, self.contentHeight);
    } else {
    frame1 = CGRectMake(self.viewX, viewLastStartY, self.viewWidth, self.contentHeight);
    }
    self.frame = frame1;

    // 开始一次滚动动画
    [UIView beginAnimations:@"" context:nil];
    [UIView setAnimationCurve:UIViewAnimationCurveLinear];
    [UIView setAnimationDuration:duration];
    [UIView setAnimationDelay:0];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(loopAnimationDidStop:finished:context:)];

    // 设置结束时的 frame
    CGRect frame2;
    if (self.animationDirection > 1) {
    frame2 = CGRectMake(viewLastEndX, self.viewY, self.viewWidth, self.contentHeight);
    } else {
    frame2 = CGRectMake(self.viewX, viewLastEndY, self.viewWidth, self.contentHeight);
    }
    self.frame = frame2;

    // 结束一次滚动动画
    [UIView commitAnimations];
    }

    /// 一次动画结束事件响应处理
    - (void)loopAnimationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {

    self.currentIndex++;
    if (self.currentIndex >= self.contentTexts.count) {
    self.currentIndex = 0;
    }

    // 重新开启滚动动画
    [self startLoopAnimation];
    }

    /// 开始滚动
    - (void)q_startAnimation {

    // 创建视图
    [self setupView];

    // 开启动画默认第一条信息
    self.currentIndex = 0;

    // 开始滚动动画
    [self startLoopAnimation];
    }

    /// 文本内容点击事件处理
    - (void)contentClick {

    if ([self.delegate respondsToSelector:@selector(didClickContentAtIndex:)]) {
    [self.delegate didClickContentAtIndex:self.currentIndex];
    }
    }

    @end
  • 使用

    • 1、初始化

      • QBulletScreenView 继承自 UIView, 初始化和 UIView 一样

        1
        2
        3
        4
        5
        6
        7
        8
        9
        // 创建弹幕视图控件
        CGRect frame = CGRectMake(0, 100, 0, 30);
        QBulletScreenView *bulletScreenView = [[QBulletScreenView alloc] initWithFrame:frame];

        // 常规设置,QBulletScreenView 继承自 UIView, 设置和 UIView 一样
        bulletScreenView.layer.cornerRadius = 15;
        bulletScreenView.layer.masksToBounds = YES;
        bulletScreenView.backgroundColor = [[UIColor grayColor] colorWithAlphaComponent:0.5];
        [self.view addSubview:bulletScreenView];
      • 也可以使用类方法一体式创建设置

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        // 创建弹幕视图控件,开始滚动
        CGRect frame = CGRectMake(0, 100, 0, 30);
        QBulletScreenView *bulletScreenView = [QBulletScreenView q_bulletScreenWithFrame:frame
        texts:showList
        color:[UIColor whiteColor]
        font:nil
        icon:[UIImage imageNamed:@"waring1"]
        direction:QBulletScreenViewDirectionLeft
        duration:5.0
        target:nil];
        [self.view addSubview:bulletScreenView];
    • 2、设置显示的文本内容

      • 文本内容存放到数组中设置

        1
        2
        3
        4
        5
        6
        7
        8
        // 设置显示的内容
        NSArray *showList = @[@"1. Hello World",
        @"2. 欢迎大家关注哦!",
        @"3. GitHub:QianChia",
        @"4. 新浪微博:QianChia0123",
        @"5. 个人博客:cnblogs.com/QianChia"];

        bulletScreenView.contentTexts = showList;
      • 文本内容可选属性设置,可以设置文本内容的颜色、字体

        1
        2
        3
        4
        5
        // 显示的文本内容颜色,default is redColor
        bulletScreenView.contentTextColor = [UIColor whiteColor];

        // 显示的文本内容字体,default is 15.0
        bulletScreenView.contentTextFont = [UIFont boldSystemFontOfSize:18];
    • 3、设置显示的图标内容

      • 除显示文本内容外,还可以可选设置显示左侧图标

        1
        2
        // 显示的图标内容,可以为 nil 不显示图标
        bulletScreenView.contentIcon = [UIImage imageNamed:@"waring1"];
    • 4、设置动画时间

      • 动画时间等于 0 时不进行滚动

        1
        2
        // 设置动画时间
        bulletScreenView.animationDuration = 5.0;
    • 5、设置动画方向

      • 不设置时默认向上滚动

        1
        2
        // 设置动画方向,default is QBulletScreenViewDirectionUp
        bulletScreenView.animationDirection = QBulletScreenViewDirectionLeft;
    • 6、设置点击回调代理

      • 点击显示的内容时可以可选设置响应代理

        1
        2
        // 设置代理,响应滚动视图点击
        bulletScreenView.delegate = self;
    • 7、开始滚动动画

      • 添加设置完成后,开启动画

        1
        2
        // 开始动画
        [bulletScreenView q_startAnimation];

2.1 水平向左移动

  • 水平向左移动

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    // 创建弹幕视图控件
    CGRect frame = CGRectMake(0, 100, 0, 30); // x, width 设置无效
    QBulletScreenView *bulletScreenView = [[QBulletScreenView alloc] initWithFrame:frame];

    // 设置显示的内容
    NSArray *showList = @[@"1. Hello World",
    @"2. 欢迎大家关注哦!",
    @"3. GitHub:QianChia",
    @"4. 新浪微博:QianChia0123",
    @"5. 个人博客:cnblogs.com/QianChia"];

    bulletScreenView.contentTexts = showList;
    bulletScreenView.contentTextColor = [UIColor whiteColor];
    bulletScreenView.contentTextFont = [UIFont boldSystemFontOfSize:18];
    bulletScreenView.contentIcon = [UIImage imageNamed:@"waring1"];

    // 设置动画时间
    bulletScreenView.animationDuration = 5.0;

    // 设置动画方向
    bulletScreenView.animationDirection = QBulletScreenViewDirectionLeft;

    // 常规设置
    bulletScreenView.layer.cornerRadius = 15;
    bulletScreenView.layer.masksToBounds = YES;
    bulletScreenView.backgroundColor = [UIColor colorWithRed:102/255.0f green:133/255.0f blue:253/255.0f alpha:1];
    [self.view addSubview:bulletScreenView];

    // 开始滚动
    [bulletScreenView q_startAnimation];
    • 效果

      Label14 Label15

2.2 水平向右移动

  • 水平向右移动

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    // 设置显示的内容
    NSArray *showList = @[@"1. Hello World",
    @"2. 欢迎大家关注哦!",
    @"3. GitHub:QianChia",
    @"4. 新浪微博:QianChia0123",
    @"5. 个人博客:cnblogs.com/QianChia"];

    // 创建弹幕视图控件
    CGRect frame = CGRectMake(0, 200, 0, 30); // x, width 设置无效
    QBulletScreenView *bulletScreenView = [QBulletScreenView q_bulletScreenWithFrame:frame
    texts:showList
    color:[UIColor whiteColor]
    font:nil
    icon:[UIImage imageNamed:@"waring1"]
    direction:QBulletScreenViewDirectionRight
    duration:5.0
    target:nil];

    // 常规设置
    bulletScreenView.layer.cornerRadius = 15;
    bulletScreenView.layer.masksToBounds = YES;
    bulletScreenView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.5];
    [self.view addSubview:bulletScreenView];

    // 开始滚动
    [bulletScreenView q_startAnimation];
    • 效果

      Label16 Label17

2.3 水平向上移动

  • 水平向上移动

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    // 创建弹幕视图控件
    CGRect frame = CGRectMake(10, 0, 0, 30); // y, width 设置无效
    QBulletScreenView *bulletScreenView = [[QBulletScreenView alloc] initWithFrame:frame];

    // 设置显示的内容
    NSArray *showList = @[@"1. Hello World",
    @"2. 欢迎大家关注哦!",
    @"3. GitHub:QianChia",
    @"4. 新浪微博:QianChia0123",
    @"5. 个人博客:cnblogs.com/QianChia"];

    bulletScreenView.contentTexts = showList;
    bulletScreenView.contentTextColor = [UIColor whiteColor];
    bulletScreenView.contentTextFont = [UIFont boldSystemFontOfSize:18];
    bulletScreenView.contentIcon = [UIImage imageNamed:@"waring1"];

    // 设置动画时间
    bulletScreenView.animationDuration = 2.0;

    // 设置动画方向
    bulletScreenView.animationDirection = QBulletScreenViewDirectionUp;

    // 常规设置
    bulletScreenView.layer.cornerRadius = 15;
    bulletScreenView.layer.masksToBounds = YES;
    bulletScreenView.backgroundColor = [UIColor colorWithRed:102/255.0f green:133/255.0f blue:253/255.0f alpha:1];
    [backView addSubview:bulletScreenView];

    // 开始滚动
    [bulletScreenView q_startAnimation];
    • 效果

      Label18

2.4 水平向下移动

  • 水平向下移动

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    // 设置显示的内容
    NSArray *showList = @[@"1. Hello World",
    @"2. 欢迎大家关注哦!",
    @"3. GitHub:QianChia",
    @"4. 新浪微博:QianChia0123",
    @"5. 个人博客:cnblogs.com/QianChia"];

    // 创建弹幕视图控件
    CGRect frame = CGRectMake(10, 0, 0, 30); // y, width 设置无效
    QBulletScreenView *bulletScreenView = [QBulletScreenView q_bulletScreenWithFrame:frame
    texts:showList
    color:[UIColor whiteColor]
    font:[UIFont boldSystemFontOfSize:18]
    icon:[UIImage imageNamed:@"waring1"]
    direction:QBulletScreenViewDirectionDown
    duration:2.0
    target:nil];

    // 常规设置
    bulletScreenView.layer.cornerRadius = 15;
    bulletScreenView.layer.masksToBounds = YES;
    bulletScreenView.backgroundColor = [UIColor colorWithRed:102/255.0f green:133/255.0f blue:253/255.0f alpha:1];
    [backView addSubview:bulletScreenView];

    // 开始滚动
    [bulletScreenView q_startAnimation];
    • 效果

      Label19

文章目录
  1. 1. 1、跑马灯
    1. 1.1. 1.1 垂直滚动
    2. 1.2. 1.2 水平滚动
  2. 2. 2、弹幕
    1. 2.1. 2.1 水平向左移动
    2. 2.2. 2.2 水平向右移动
    3. 2.3. 2.3 水平向上移动
    4. 2.4. 2.4 水平向下移动
隐藏目录