正常滚动字幕,中奖信息展示跑马灯,多行翻页无限循环
先看看最终效果(由于录屏原因,GIF里面看着有点卡顿)
Screenflick Movie .gif
Screenflick Movie.gif
demo已上传GitHub:https://github.com/xinsun001/ScrollMarqueeView
一共四种形式的滚动字幕,我们先来看第一个
水平连续滚动字幕:
这种一看就是一组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;
demo地址:https://github.com/xinsun001/ScrollMarqueeView
如果觉得不错的话,就给个赞吧!
网友评论