转载:原文地址
前言
今天给大家带来的是抖音得滚动字幕,也就是音乐专辑的专辑名称 废话不多说上图
抖音如下
系统的滚动字幕如下
本篇完成之后如下
- 支持蒙版渐变模糊 可调节
- 支持富文本字符串用于显示表情或者图片
开篇
整个实现比较简单 不超过 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 、、、、
