正常滾動字幕，中獎信息展示跑馬燈，多行翻頁無限循環(huán)
先看看最終效果（由于錄屏原因，GIF里面看著有點卡頓）
demo已上傳GitHub：https://github.com/xinsun001/ScrollMarqueeView
一共四種形式的滾動字幕，我們先來看第一個
水平連續(xù)滾動字幕：
這種一看就是一組view放在scrollview實現(xiàn)的滾動，但是如何實現(xiàn)循環(huán)滾動呢，思路如下
1：加入滾動字幕有五組文本，滾動到最后一組時，后面應該緊跟著第一組文本，如此才能實現(xiàn)連續(xù)滾動
2：我們可以把傳入的文本個數(shù)翻倍，來實現(xiàn)最后一組文本后面又跟著第一組的文本（如果數(shù)據(jù)太少可以翻4倍，6倍，總之最好雙倍數(shù)，否則x軸坐標處理會麻煩一點）
3：我們可以讓滾動框在最后一個文本滾動消失后，重置滾動框的坐標，如此反復，就可以實現(xiàn)無線循環(huán)
添加UI的部分代碼就不貼了，需要的可以自行下載demo
//獲取到最大滾動范圍就可以啟動滾動事件
-(void)setScrMaxW:(NSInteger)scrMaxW{
_scrMaxW=scrMaxW;
self.textScrollview.contentSize=CGSizeMake(scrMaxW, 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];
//滾動到可滾動區(qū)域的一半時重置
if (self.textScrollview.contentOffset.x+1>=self.textScrollview.contentSize.width/2) {
self.scrX=0;
[self.textScrollview setContentOffset:CGPointMake(self.scrX, 0) animated:NO];
}else{
}
}
水平翻頁滾動字幕：
這種的更簡單，只需要一個label，只要在滾動過程中不斷地改變label展示文本就可以了
1：實時計算要加載的文本的寬度，加上屏寬*2，將label放在最中間
2：每次label消失之后，更新展示文本和滾動區(qū)域
3：展示完成最后一個文本后，文本下一個要再展示第一個文本實現(xiàn)循環(huán)
關鍵代碼：
-(void)setTextArr:(NSMutableArray *)textArr{
_textArr=textArr;
self.txtLabel.text=textArr[0];
self.scrollWidth=[self getTxtWidth:textArr[0]];
// 初始展示的字幕可以根據(jù)需求調(diào)整，放在最左邊或者默認在屏幕右側
[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);
}
豎直多行翻頁循環(huán)滾動：
大家看著這個動畫是不是有一點熟悉，“拼夕夕”里面，拼單頁面就有這樣UI。
像這種第五個文本后面緊跟著第一個文本的，而且又是循環(huán)滾動的，其實思路和第一個水平滾動的是一樣的，同樣數(shù)據(jù)翻倍，滾動完一次重置，這樣就可以實現(xiàn)循環(huán)
不過這里我換成了tableview來實現(xiàn)，沒有用數(shù)組添加UI了
關鍵代碼：
-(void)setSxArry:(NSMutableArray *)sxArry{
_sxArry=sxArry;
//將要顯示的文本數(shù)量翻倍
[_sxArry addObjectsFromArray:[NSArray arrayWithArray:sxArry]];
}
-(void)scrollTableveiwcell{
__weak typeof(self) weakSelf=self;
// 整個滾動完一次，回到初始狀態(tài)
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;
}];
}
豎直翻頁滾動字幕：
最后的這個滾動字幕實現(xiàn)方案很多，可以像上面水平翻頁的思路一樣，也可以添加上下兩個label來循環(huán)展示文本實現(xiàn)，不過這里不用NSTimer也能實現(xiàn)
-(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];
});
}];
}
最后要處理一下滾動區(qū)域的問題
//展示區(qū)域多余的部分截去，否則在動畫滾動的時候，會跑到區(qū)域外面
self.verBgView.layer.masksToBounds=YES;
demo地址：https://github.com/xinsun001/ScrollMarqueeView
如果覺得不錯的話，就給個贊吧！
