轉(zhuǎn)載:原文地址
前言
今天給大家?guī)淼氖嵌兑舻脻L動字幕,也就是音樂專輯的專輯名稱 廢話不多說上圖
抖音如下
系統(tǒng)的滾動字幕如下
本篇完成之后如下
- 支持蒙版漸變模糊 可調(diào)節(jié)
- 支持富文本字符串用于顯示表情或者圖片
開篇
整個實現(xiàn)比較簡單 不超過 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的時候視圖不夠長會出現(xiàn)溢出得情況 不推薦超出范圍
*/
@property (nonatomic, assign) CGFloat fade; //5
@end
對外暴露的接口
- 1.顯示的文本內(nèi)容
- 2.文本顏色
- 3.文本字體
- 4.屬性字符串 自行可控顏色字體和樣式
- 5.蒙版漸變模糊的 漸變長度
首先大家可以先忽略這些對外暴露的接口 到.m中看實現(xiàn)如下
@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方法創(chuàng)建我們需要的2個layer > configProperty方法 初始化成員變量最好用
_下劃線 這樣不會觸發(fā)setter因為我們很多的代碼都是寫在setter和getter中
初始化Layer
下面我們重點看下initLayer 、痕支、寄悯、燃异、
