原文链接：/p/7221bc08f26a SKAutoScrollLabel 是一个同时支持水平 / 垂直两种类型的 “跑马灯” 效果的自动滚动 UILabel。在滚动的边缘使用了梯度褪色来解决滚动边缘生硬的效果问题，总体效果呈现出混然天成的感觉，并且使用简单方便。 —— 由ShevaKuilin分享
简述
SKAutoScrollLabel是一个同时支持水平/垂直两种类型的“跑马灯”效果的自动滚动UILabel。在滚动的边缘使用了梯度褪色来解决滚动边缘生硬的效果问题，总体效果呈现出混然天成的感觉，并且使用简单方便。如果你觉得还不错，请star支持一下吧~
效果图
如何开始
1.从GitHub上Clone-->SKAutoScrollLabel，然后查看Demo
2.直接将目录下的SKAutoScrollLabel拷贝到工程中，或在podfile文件夹中添加pod 'SKAutoScrollLabel'
使用方法
初始化
SKAutoScrollLabel * leftLabel = [[SKAutoScrollLabel alloc] initWithFrame:CGRectMake(50, 50, [UIScreen mainScreen].bounds.size.width - 100, 50)];[self.view addSubview:leftLabel];
基本设置
leftLabel.backgroundColor = [UIColor blackColor];// 背景色leftLabel.textColor = [UIColor whiteColor];// 字体颜色leftLabel.font = [UIFont systemFontOfSize:16];// 字体大小leftLabel.direction = SK_AUTOSCROLL_DIRECTION_LEFT;// 滚动方向，这是向左滚动leftLabel.text = text;// 显示内容
实现
※ 这里仅列出关键步骤，具体方法请查阅源码
我们需要创建一个数组，来存放我们滚动时所需要展示的label，这里我们只创建两个label存放到数组中即可（滚动只需要两个即可达成持续跑马灯的效果）
// 创建label数组NSMutableSet * labelSet = [[NSMutableSet alloc] init];for (NSInteger i = 0; i < kLabelCount; i++) {UILabel * label = [UILabel new];label.backgroundColor = [UIColor clearColor];label.autoresizingMask = self.autoresizingMask;label.frame = CGRectMake(0, 0, 50, 50);[self.scrollView addSubview:label];[labelSet addObject:label];}self.labels = [labelSet.allObjects copy];
2.区分水平和垂直的UILabel
static void each_object(NSArray *objects, void (^block)(UILabel * label)) {for (UILabel * label in objects) {block(label);}}
__block float offset = 0;// 遍历label数组中的元素each_object(self.labels, ^(UILabel *label) {[label sizeToFit];CGRect frame = label.frame;// 垂直if (self.direction != SK_AUTOSCROLL_DIRECTION_RIGHT && self.direction != SK_AUTOSCROLL_DIRECTION_LEFT) {// 动态获取长度和高度, 以此达到将label垂直的目的NSDictionary * attribute = [NSDictionary dictionaryWithObjectsAndKeys:self.font,NSFontAttributeName, nil];CGSize sizeWord = [@"一" boundingRectWithSize:self.bounds.size options:NSStringDrawingUsesFontLeading | NSStringDrawingUsesLineFragmentOrigin attributes:attribute context:nil].size;CGFloat wordWidth = sizeWord.width;CGSize sizeStr = [self.text boundingRectWithSize:CGSizeMake(wordWidth, CGFLOAT_MAX) options:NSStringDrawingUsesFontLeading | NSStringDrawingUsesLineFragmentOrigin attributes:attribute context:nil].size;CGFloat wordHeight = sizeStr.height;frame.origin = CGPointMake((CGRectGetWidth(self.frame) / 2) - (wordWidth / 2), offset);frame.size = CGSizeMake(wordWidth, wordHeight);label.frame = frame;label.numberOfLines = 0;offset += CGRectGetHeight(label.bounds) + self.labelSpacing;} else {// 水平frame.origin = CGPointMake(offset, 0);frame.size.height = CGRectGetHeight(self.bounds);label.frame = frame;offset += CGRectGetWidth(label.bounds) + self.labelSpacing;// 重新定位label在scrollview中的位置label.center = CGPointMake(label.center.x, roundf(self.center.y - CGRectGetMinY(self.frame)));}});
3.判断滚动条件，是否允许滚动
// (水平方向) 判断当前scrollLabel是否大于self的宽度，如果是就开始滚动if (CGRectGetWidth(self.scrollLabel.bounds) > CGRectGetWidth(self.bounds)) {CGSize size = CGSizeMake(CGRectGetWidth(self.scrollLabel.bounds) + CGRectGetWidth(self.bounds) + self.labelSpacing, CGRectGetHeight(self.bounds));self.scrollView.contentSize = size;EACH_LABEL(hidden, NO);[self applyGradientMaskForFadeLength:kDefaultFadeLength enableFade:self.scrolling];[self scrollLabelIfNeeded];} else if (CGRectGetHeight(self.scrollLabel.bounds) > CGRectGetHeight(self.bounds)) {// (垂直方向) 判断当前scrollLabel是否大于self的高度，如果是就开始滚动CGSize size = CGSizeMake(CGRectGetWidth(self.bounds), CGRectGetHeight(self.scrollLabel.bounds) + self.labelSpacing);self.scrollView.contentSize = size;EACH_LABEL(hidden, NO);[self applyGradientMaskForFadeLength:kDefaultFadeLength enableFade:self.scrolling];[self scrollLabelIfNeeded];} else {// 隐藏其他labelEACH_LABEL(hidden, self.scrollLabel != label);// 调整scrollView和scrollLabelself.scrollView.contentSize = self.bounds.size;self.scrollLabel.frame = self.bounds;self.scrollLabel.hidden = NO;self.scrollLabel.textAlignment = NSTextAlignmentCenter;[self.scrollView.layer removeAllAnimations];[self applyGradientMaskForFadeLength:0 enableFade:NO];}
4.自动滚动动画
switch (self.direction) {// 滚动方向case SK_AUTOSCROLL_DIRECTION_LEFT:self.scrollView.contentOffset = CGPointZero;break;case SK_AUTOSCROLL_DIRECTION_RIGHT:self.scrollView.contentOffset = CGPointMake(width + self.labelSpacing, 0);break;case SK_AUTOSCROLL_DIRECTION_TOP:self.scrollView.contentOffset = CGPointZero;break;case SK_AUTOSCROLL_DIRECTION_BOTTOM:self.scrollView.contentOffset = CGPointMake(0, height - 10 - CGRectGetHeight(self.bounds));break;}// 滚动动画, UIViewAnimationOptionRepeat一直重复动画[UIView animateWithDuration:duration delay:self.autoScrollInterval options:UIViewAnimationOptionRepeat animations:^{switch (self.direction) {case SK_AUTOSCROLL_DIRECTION_LEFT:self.scrollView.contentOffset = CGPointMake(width + self.labelSpacing, 0);break;case SK_AUTOSCROLL_DIRECTION_RIGHT:self.scrollView.contentOffset = CGPointZero;break;case SK_AUTOSCROLL_DIRECTION_TOP:self.scrollView.contentOffset = CGPointMake(0, CGRectGetHeight(self.scrollLabel.bounds) + self.labelSpacing);break;case SK_AUTOSCROLL_DIRECTION_BOTTOM:self.scrollView.contentOffset = CGPointZero;break;}} completion:^(BOOL finished) {_scrolling = NO;// 移除阴影[self applyGradientMaskForFadeLength:kDefaultFadeLength enableFade:NO];// 完成后循调用if (finished) {[self performSelector:@selector(scrollLabelIfNeeded)];}}];
5.使用CAGradientLayer在滚动边缘的制造梯度褪色效果
// 创建梯度mask和消失长度CAGradientLayer * gradientMask = [CAGradientLayer layer];gradientMask.bounds = self.layer.bounds;gradientMask.position = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));gradientMask.shouldRasterize = YES;gradientMask.rasterizationScale = [UIScreen mainScreen].scale;CGFloat fadePoint = 0;// 垂直方向的梯度褪色if (self.direction != SK_AUTOSCROLL_DIRECTION_RIGHT && self.direction != SK_AUTOSCROLL_DIRECTION_LEFT) {gradientMask.startPoint = CGPointMake(CGRectGetMidX(self.frame), 0);gradientMask.endPoint = CGPointMake(CGRectGetMidX(self.frame), 1);fadePoint = fadeLength / CGRectGetHeight(self.bounds);// 水平方向的梯度褪色} else {gradientMask.startPoint = CGPointMake(0, CGRectGetMidY(self.frame));gradientMask.endPoint = CGPointMake(1, CGRectGetMidY(self.frame));fadePoint = fadeLength / CGRectGetWidth(self.bounds);}// 设置渐变mask颜色和位置id transparent = (id)[UIColor clearColor].CGColor;id opaque = (id)[UIColor blackColor].CGColor;gradientMask.colors = @[transparent, opaque, opaque, transparent];// 计算褪色NSNumber * leftFadePoint = @(fadePoint);NSNumber * rightFadePoint = @(1 - fadePoint);if (!fade) {switch (self.direction) {case SK_AUTOSCROLL_DIRECTION_LEFT:leftFadePoint = @0;break;case SK_AUTOSCROLL_DIRECTION_RIGHT:leftFadePoint = @0;rightFadePoint = @1;break;case SK_AUTOSCROLL_DIRECTION_TOP:leftFadePoint = @0;break;case SK_AUTOSCROLL_DIRECTION_BOTTOM:leftFadePoint = @0;rightFadePoint = @1;break;}}// 将计算结果交给maskgradientMask.locations = @[@0, leftFadePoint, rightFadePoint, @1];[CATransaction begin];[CATransaction setDisableActions:YES];self.layer.mask = gradientMask;[CATransaction commit];
感谢你花时间阅读以上内容, 如果这个项目能够帮助到你，记得告诉我
Email: shevakuilin@
