「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」。

前言

跑马灯的应用场景：

iOS 抽奖轮盘边框动画

从CSDN下载Demo：https://download.csdn.net/download/u011018979/16543761 原理：用NSTimer无限替换背景图片1和背景图片2，达到跑马灯的效果


- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
    [self rotate:_rotaryTable];
    
}

/**
 
 iOS翻牌效果

 */
- (void)rotate:(id)sender {
    
[UIView beginAnimations:@"View Filp" context:nil];
[UIView setAnimationDelay:0.25];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:sender
                          cache:NO];
[UIView commitAnimations];
    
}

在待办界面或者工作台界面，往往需要应用到跑马灯的地方

原理：利用QMUIMarqueeLabel 进行cell封装简易的跑马灯 label 控件

在这里插入图片描述如用户登陆未绑定手机号，进行提示。

简易的跑马灯 label 控件，在文字超过 label 可视区域时会自动开启跑马灯效果展示文字，文字滚动时是首尾连接的效果

I iOS 抽奖轮盘边框动画

原理：用NSTimer无限替换UIImageView的Image为互为错位的bg_horse_race_lamp_1或者bg_horse_race_lamp_2，达到跑马灯的效果

blog.csdn.net/z929118967/…

II 跑马灯label控件实现案例

利用QMUIKit的 QMUIMarqueeLabel进行界面的搭建

升级QMUIKit:git:(develop) ✗ pod update QMUIKit --verbose --repo-update

2.1 右侧按钮，右侧跑马灯文字

在这里插入图片描述

用法

CRMWorkNoteModel模型构建

@interface CRMWorkNoteModel : NSObject
/**
 文字信息
 */
@property (nonatomic,copy) NSString *tiptext;
/**
 icon
 */
@property (nonatomic,copy) NSString *TipiconName;


@property(nonatomic,assign)        NSTextAlignment    textAlignment;   // default is NSTextAlignmentNatural (before iOS 9, the default was NSTextAlignmentLeft)



@property(nonatomic,assign)        BOOL    isNeedChangetextAlignment;   // default is NSTextAlignmentNatural (before iOS 9, the default was NSTextAlignmentLeft)

/**
 cell的高度
 */
@property(nonatomic,assign)        CGFloat    HeightForV;

    self.WorkNoteModel = [CRMWorkNoteModel new];

    self.WorkNoteModel.tiptext = @"用户未绑定手机，请至\"我的\">>\"安全管理\"绑定手机号！";
    self.WorkNoteModel.TipiconName = @"icon_shanghu_jinghao_small_24";

cell的初始化

    switch (indexPath.section) {
        case CRMRisk_merchant_List_VSection4Note:
        {
            
            
            CRMWorkNoteCellTableViewCell *cell = [CRMWorkNoteCellTableViewCell tableViewCellWithTableView:tableView block:^(id  sender) {
                

                
                
            } models:self.viewModel.WorkNoteModel];
            
            return cell;
            
        }
            break;

cell视图CRMWorkNoteV的构建

CRMWorkNoteV.h


#import <UIKit/UIKit.h>
#import "CRMWorkNoteModel.h"

NS_ASSUME_NONNULL_BEGIN

@interface CRMWorkNoteV : UIView
@property (nonatomic, strong) CRMWorkNoteModel* models;

@property (nonatomic,weak) UIButton *btn;
@property (nonatomic,weak) QMUIMarqueeLabel *titleLable;





@end

```
CRMWorkNoteV.m
```

//
//  CRMWorkNoteV.m
//  Housekeeper
//
//  Created by mac on 2020/5/20.
//  Copyright © 2020 QCT. All rights reserved.
//

#import "CRMWorkNoteV.h"

@implementation CRMWorkNoteV


- (instancetype)init {
    self = [super init];
    if (self) {////既然nil解析成NO，所以没有必要在条件语句比较。不要拿某样东西直接与YES比较，因为YES被定义为1
        // ...
        [self btn];
        [self titleLable];
        
    }
    return self;
}

- (UIButton *)btn{
    if (_btn == nil
        ) {
        UIButton *tmp  = [UIButton new];
        
        [tmp setImage:[UIImage imageNamed:@"icon_shanghu_jinghao_small_24"] forState: UIControlStateNormal];
        
        _btn = tmp;
        __weak __typeof__(self) weakSelf = self;
        [self addSubview:tmp];

        [_btn mas_makeConstraints:^(MASConstraintMaker *make) {
            make.centerY.equalTo(weakSelf);
            make.height.width.mas_equalTo(kAdjustRatio(15));
            make.left.equalTo(weakSelf).offset(kAdjustRatio(16));
        }];
        
    }
    return _btn;
}


- (UILabel *)titleLable{
    if (nil == _titleLable) {
        QMUIMarqueeLabel *tmpView = [[QMUIMarqueeLabel alloc]init];
        _titleLable = tmpView;
        tmpView.textAlignment = NSTextAlignmentCenter;// 跑马灯文字一般都是居中显示，所以 Demo 里默认使用 center
        
//        tmpView.shouldFadeAtEdge = NO;// 关闭渐隐遮罩
//        tmpView.speed = 1.5;// 调节滚动速度
        
        tmpView.textStartAfterFade = YES;// 文字停靠在遮罩的右边



        
        [self addSubview:_titleLable];
        __weak __typeof__(self) weakSelf = self;

        [_titleLable mas_makeConstraints:^(MASConstraintMaker *make) {
            make.centerY.equalTo(weakSelf);

            make.left.equalTo(weakSelf.btn.mas_right).offset(kAdjustRatio(6));

            make.right.offset(kAdjustRatio(-10));
            
            
        }];
    }
    return _titleLable;
}


- (void)setModels:(CRMWorkNoteModel *)models{
    _models = models;
        
    [self.btn setImage:[UIImage imageNamed:models.TipiconName] forState:UIControlStateNormal];
          
    [self setuptitle:models.tiptext];
     
}

- (void)setuptitle:(NSString*)text{
    
//     = title;
    
    
    NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:text];//_label.text
    
    
    
    
    [attributedString addAttribute:NSFontAttributeName  value:kPingFangFont(11)  range:NSMakeRange(0, text.length)];
    
    
    [attributedString addAttribute:NSForegroundColorAttributeName value:[UIColor colorWithRed:255.0f/255.0f green:162.0f/255.0f blue:29.0f/255.0f alpha:1.0f] range:NSMakeRange(0, text.length)];
    
    
    self.titleLable.attributedText = attributedString;

}



@end

cell的封装由于篇幅原因，完整内容请看这里

iOS跑马灯控件的应用

前言

I iOS 抽奖轮盘边框动画

II 跑马灯label控件实现案例

2.1 右侧按钮，右侧跑马灯文字

see also