正常滚动字幕，中奖信息显示跑马灯，多行翻页无限循环.
先来看看最终效果(因为屏幕录制，GIF看起来有点卡)。
演示已上传到github:, https://github.com/xinsun001/ScrollMarqueeView.
滚动字幕有四种。我们先来看看第一个.
水平连续滚动字幕：
乍一看，这种滚动是通过在scrollview中放一组视图来实现的，但是如何实现循环滚动如下：.
1.滚动字幕中有五组文字。滚动到最后一组时，应立即跟随第一组文本，以实现连续滚动.
2.我们可以将传入的文本数量翻倍，实现最后一组文本跟在第一组文本后面的(如果数据太少，可以翻4倍或者6倍，总之最好翻倍，否则X轴坐标处理会有点麻烦)。
3:我们可以在最后一次文字滚动消失后重新设置滚动框的坐标，这样就可以实现无线循环了。
添加到用户界面的部分代码将不会发布，如果你需要，你可以下载演示。
//获得最大滚动范围时可以启动滚动事件——(void)setscrmaxw :(nsinteger)scrmaxw { _ scrmaxw=scrmaxw；self . textscrollview . content size=CGSizeMake(scrMaxW，0)；[自添加定时器]；}
-(void)timer click { self . scrx=self . scrx 1；[ui view animatewithduration :0.1 delay :0 options 3360 ui view animationoptions curve line ear animations:^{[self . textscrolview setcontentoffset : cgpointmake(self . scrx，0)animated : no]；} completion : nil]；//当滚动到可滚动区域的一半时重置if(self . textscrollview . content offset . x1=self.textscrollview.contentsize.width/2){ self . scrx=0；[self . textscrollview setcontentoffset : cgpointmake(self . scrx，0)animated : no]；} else { } }
ong> 水平翻页滚动字幕： 这种的更简单，只需要一个label，只要在滚动过程中不断地改变label展示文本就可以了 1：实时计算要加载的文本的宽度，加上屏宽*2，将label放在最中间 2：每次label消失之后，更新展示文本和滚动区域 3：展示完成最后一个文本后，文本下一个要再展示第一个文本实现循环
关键代码：
-(void)setTextArr:(NSMutableArray *)textArr{ _textArr=textArr; self.txtLabel.text=textArr[0]; self.scrollWidth=[self getTxtWidth:textArr[0]]; // 初始展示的字幕可以根据需求调整，放在最左边或者默认在屏幕右侧 [self.textScrollview setContentOffset:CGPointMake(ViewAllWidth, 0) animated:NO];// 初始展示文本下标 self.arrNum=0; [self addTimer];}
- (void)timerClick{ self.scrX=self.scrX+1; [UIView animateWithDuration:0.1 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{ [self.textScrollview setContentOffset:CGPointMake(self.scrX, 0) animated:NO]; } completion:nil]; if (self.textScrollview.contentOffset.x>=self.textScrollview.contentSize.width-ViewAllWidth) { [self refreshTxt]; }else{ }} -(void)refreshTxt{ if (self.arrNum==self.textArr.count-1) { self.arrNum=0; }else{ self.arrNum=self.arrNum+1; } self.txtLabel.text=self.textArr[self.arrNum]; self.scrollWidth=[self getTxtWidth:self.textArr[self.arrNum]]; self.scrX=0; [self.textScrollview setContentOffset:CGPointMake(self.scrX, 0) animated:NO];}-(void)setScrollWidth:(CGFloat)scrollWidth{ _scrollWidth=scrollWidth; self.textScrollview.contentSize=CGSizeMake(scrollWidth+ViewAllWidth*2, 0);}
``
竖直多行翻页循环滚动：
大家看着这个动画是不是有一点熟悉，“拼夕夕”里面，拼单页面就有这样UI。
像这种第五个文本后面紧跟着第一个文本的，而且又是循环滚动的，其实思路和第一个水平滚动的是一样的，同样数据翻倍，滚动完一次重置，这样就可以实现循环
不过这里我换成了tableview来实现，没有用数组添加UI了
关键代码：
-(void)setSxArry:(NSMutableArray *)sxArry{ _sxArry=sxArry; //将要显示的文本数量翻倍 [_sxArry addObjectsFromArray:[NSArray arrayWithArray:sxArry]]; }
-(void)scrollTableveiwcell{ __weak typeof(self) weakSelf=self; // 整个滚动完一次，回到初始状态 if (self.scrollSection==self.sxArry.count/2) { self.scrollSection=0; [self.fightTableView setContentOffset:CGPointMake(0, 0) animated:NO]; }else{ } [UIView transitionWithView: self.fightTableView duration:0.3 options: UIViewAnimationOptionTransitionNone animations: ^{ [weakSelf.fightTableView setContentOffset:CGPointMake(0, weakSelf.fightTableView.contentOffset.y+cellHeight) animated:YES]; } completion: ^(BOOL finished) { weakSelf.scrollSection=weakSelf.scrollSection+1; }];}
`
`
竖直翻页滚动字幕：
最后的这个滚动字幕实现方案很多，可以像上面水平翻页的思路一样，也可以添加上下两个label来循环展示文本实现，不过这里不用NSTimer也能实现作者：非常菜的小白
-(void)checkDataIndex{ if (self.arrNum==self.sxArry.count-1) { self.arrNum=0; }else{ self.arrNum=self.arrNum+1; }}- (void)scrollTxtAction { [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{ CATransition *transition = [CATransition animation]; transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; transition.type = kCATransitionPush; transition.subtype = kCATransitionFromTop; transition.delegate = self; [self.txtLabel.layer addAnimation:transition forKey:nil]; [self checkDataIndex]; } completion:^(BOOL finished) { self.txtLabel.text=self.sxArry[self.arrNum]; dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ [self scrollTxtAction]; }); }];}
最后要处理一下滚动区域的问题
//展示区域多余的部分截去，否则在动画滚动的时候，会跑到区域外面 self.verBgView.layer.masksToBounds=YES;
* * *
转自简书：非常菜的小白
原文链接：https://www.jianshu.com/p/7ea6ee8b9bc7
