IOS 滚动字幕

作者: 菠萝吹雪xs | 来源:发表于2021-01-28 17:30 被阅读0次

正常滚动字幕,中奖信息展示跑马灯,多行翻页无限循环
先看看最终效果(由于录屏原因,GIF里面看着有点卡顿)


Screenflick Movie .gif
Screenflick Movie.gif

demo已上传GitHub:https://github.com/xinsun001/ScrollMarqueeView

一共四种形式的滚动字幕,我们先来看第一个
水平连续滚动字幕:
这种一看就是一组view放在scrollview实现的滚动,但是如何实现循环滚动呢,思路如下
1:加入滚动字幕有五组文本,滚动到最后一组时,后面应该紧跟着第一组文本,如此才能实现连续滚动
2:我们可以把传入的文本个数翻倍,来实现最后一组文本后面又跟着第一组的文本(如果数据太少可以翻4倍,6倍,总之最好双倍数,否则x轴坐标处理会麻烦一点)
3:我们可以让滚动框在最后一个文本滚动消失后,重置滚动框的坐标,如此反复,就可以实现无线循环

image.png

添加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:展示完成最后一个文本后,文本下一个要再展示第一个文本实现循环

image.png
关键代码:
-(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
如果觉得不错的话,就给个赞吧!

相关文章

  • IOS 滚动字幕

    正常滚动字幕,中奖信息展示跑马灯,多行翻页无限循环先看看最终效果(由于录屏原因,GIF里面看着有点卡顿) demo...

  • iOS抖音滚动字幕

    今天给大家带来的是抖音得滚动字幕,也就是音乐专辑的专辑名称 废话不多说上图 抖音如下 系统的滚动字幕如下 本篇完成...

  • iOS抖音滚动字幕

    抖音如下 系统的滚动字幕如下 本篇完成之后如下 支持蒙版渐变模糊 可调节 支持富文本字符串用于显示表情或者图片 开...

  • 抖音滚动字幕—iOS

    转载:原文地址 前言 今天给大家带来的是抖音得滚动字幕,也就是音乐专辑的专辑名称 废话不多说上图 抖音如下 系统的...

  • 滚动字幕

    昨天下载一个软件,在手机上操作总找不到设备,因此滚动屏幕无法显示自己编辑的内容,通过多次尝试连接,都无法找...

  • Pr软件怎么设置滚动字幕?

    1,点击字幕窗口左上角的切换按钮, 2,下拉选项选择滚动字幕,即可弹出设置滚动字幕的弹窗。 3,勾选开始屏幕之外即...

  • Final Cut Pro 添加字幕

    Final Cut Pro 支持的字幕主要有两种: 传统字幕(滚动字幕) 隐藏式字幕(新增功能) 自然添加字幕的方...

  • Unity 滚动字幕

    如下图所示,其实滚动字幕的本质就是一个Text在发生位移。 具体实现方式: 1、在场景中添加一个Image,在其下...

  • Final Cut Pro X for Mac软件教程之如何创建

    字幕是与视频同步的视觉文本行。字幕可用于为失聪及听障人士提供的隐藏式字幕。字幕也可用于对白字幕、卡拉 OK、滚动多...

  • Final Cut Pro X for Mac软件教程:如何创建

    字幕是与视频同步的视觉文本行,字幕可用于为失聪及听障人士提供的隐藏式字幕,字幕也可用于对白字幕、卡拉 OK、滚动多...

网友评论

    本文标题:IOS 滚动字幕

    本文链接:https://www.haomeiwen.com/subject/cbxxtltx.html