苹果手机滚动字幕

一共四种形式的滚动字幕，我们先来看第一个

水平连续滚动字幕：

这种一看就是一组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