一共四種形式的滾動字幕，我們先來看第一個

水平連續滾動字幕：

這種一看就是一組view放在scrollview實現的滾動，但是如何實現循環滾動呢，思路如下

1：加入滾動字幕有五組文本，滾動到最后一組時，后面應該緊跟著第一組文本，如此才能實現連續滾動

2：我們可以把傳入的文本個數翻倍，來實現最后一組文本后面又跟著第一組的文本（如果數據太少可以翻4倍，6倍，總之最好雙倍數，否則x軸坐標處理會麻煩一點）

3：我們可以讓滾動框在最后一個文本滾動消失后，重置滾動框的坐標，如此反復，就可以實現無線循環

添加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];????//滾動到可滾動區域的一半時重置????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消失之后，更新展示文本和滾動區域

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