抖音滚动字幕—iOS

转载:原文地址

前言

今天给大家带来的是抖音得滚动字幕,也就是音乐专辑的专辑名称 废话不多说上图

抖音如下

系统的滚动字幕如下

本篇完成之后如下

• 支持蒙版渐变模糊 可调节
• 支持富文本字符串用于显示表情或者图片

开篇

整个实现比较简单 不超过 200行代码

首先我们要用到两个CALayer

• CATextLayer 用于展示文本
• CAGradientLayer 用于给文本加蒙版

然后我们新建一个UIScrollTextView继承自UIView(我这是纯娱乐写成UI前缀大家可自行封装哈.)

@interface UIScrollTextView : UIView
@property (nonatomic, copy  ) NSString           *text;   //1
@property (nonatomic, strong) UIColor            *textColor; //2
@property (nonatomic, strong) UIFont             *font;  //3

@property (nonatomic, strong) NSAttributedString *attrString; //4
/**
 渐变开始的距离(0~0.5) 推荐 0.0x eg:0.026,
 如果设置成1的时候视图不够长会出现溢出得情况 不推荐超出范围
 */
@property (nonatomic, assign) CGFloat            fade; //5
@end

对外暴露的接口

• 1.显示的文本内容
• 2.文本颜色
• 3.文本字体
• 4.属性字符串 自行可控颜色字体和样式
• 5.蒙版渐变模糊的 渐变长度

首先大家可以先忽略这些对外暴露的接口 到.m中看实现如下

@interface UIScrollTextView ()
@property (nonatomic, strong) CATextLayer  *textLayer; //文本layer 
@property (nonatomic, strong) CAGradientLayer *gradientLayer; //蒙版渐变layer
@property (nonatomic, assign) CGFloat      textSeparateWidth; //文本分割宽度
@property (nonatomic, assign) CGFloat      textWidth;   //文本宽度
@property (nonatomic, assign) CGFloat      textHeight;  //文本高度
@property (nonatomic, assign) CGRect       textLayerFrame; //文本layer的frame
@property (nonatomic, assign) CGFloat      translationX; //文字位置游标
@end

在initWithFrame:;和awakeFromNib方法中 初始化一些成员变量

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        [self configProperty];//初始化成员变量 //1
        [self initLayer]; //2
    }
    return self;
}
- (void)configProperty {
    _text = @"";
    _textColor = [UIColor whiteColor];
    _font = [UIFont systemFontOfSize:14.0];
    self.textSeparateWidth = [kSeparateText calculateSingleLineSizeFromFont:self.font].width;
    _fade = 0.026;
}

• 1.configProperty方法 初始化默认值
• 2.initLayer方法创建我们需要的2个layer > configProperty方法 初始化成员变量最好用_下划线 这样不会触发setter因为我们很多的代码都是写在setter和getter中

初始化Layer

下面我们重点看下initLayer 、、、、

---

后续全文完整内容请转看：我的博客