iOS实现滚动字幕的动画特效

 更新时间:2016年09月08日 14:49:57   作者:小明大神  
这篇文章给大家带来一款应用非常实用的控件,滚动字幕,可以应用在新闻、财经、聊天等各类APP上,B格瞬间提升了一个档次有木有,下面跟着小编一起看看如何实现的吧。

效果图

开始上代码

滚动字幕的原理是用timer定时器间隔一定的时间来驱动scrollView上的内容偏移,来实现滚动的效果,原理比较简单,关键是有些细节需要处理好,实现流畅效果的同时要考虑到性能优化

这里是.h文件的接口方法及属性,可适应大部分自定义场景

/*初始化*/
-(instancetype)initWithFrame:(CGRect)frame textArray:(NSArray *)textArray colorArray:(NSArray *)textColorArray;

//滚动字幕数组
@property(nonatomic,strong) NSArray<NSString *> *textArray;

//字幕颜色数组
@property(nonatomic,strong) NSArray<UIColor *> *textColorArray;

//字幕背景颜色
@property(nonatomic,strong) UIColor *backgroundColorOfCanvas;

//标签背景图片
@property(nonatomic,strong) UIImage *backgroundImageOfCanvas;

//字体大小
@property(nonatomic,assign) CGFloat fontOfSize;

//定时器
@property(nonatomic,strong) NSTimer *timer;

实现滚动字幕的思路和无限轮播图相似,这里用了一点小技巧即可实现字幕的收尾连续相接:将同样的字幕内容复制一份拼接到后面就可以了,当字幕的scrollView滚动到复制的那份内容开头时,将contentOffset偏移量设置到原始内容的开头,这样就可以实现无缝的连续循环滚动了

#pragma mark - 创建scrollView内容
-(void)createContentOfScrollView{

 //创建contentView
 self.contentSize=CGSizeMake(0, self.bounds.size.height);

 //偏移量初值设为0
 self.contentOffset=CGPointMake(0, 0);

 //关闭指示条
 self.showsHorizontalScrollIndicator=NO;

 //创建label

 CGFloat labelY=0;
 CGFloat labelW=200;
 CGFloat labelH=self.bounds.size.height;

 //添加两次一样的内容,无限循环使用
 for (int j=0; j<2;j++ ) {

 for (int i=0; i<self.textArray.count; i++) {

 UILabel *textLabel=[[UILabel alloc] initWithFrame:CGRectMake(self.contentSize.width, labelY, labelW, labelH)];

 //******标签背景******
 UIImageView *labelBackGroundView=[[UIImageView alloc] initWithFrame:textLabel.frame];

 //标签背景图片
 labelBackGroundView.image=self.backgroundImageOfCanvas;

 //*****label文字******
 if (i<self.textArray.count) {
  textLabel.text=self.textArray[i];
 }else{
  textLabel.text=@"----";
 }

 //label文字颜色(判断文字颜色数组是否存有对应的颜色,没有则使用默认颜色)
 if (i<self.textColorArray.count) {
  textLabel.textColor=self.textColorArray[i];
 }else{
  //默认颜色
  textLabel.textColor=[UIColor blackColor];
 }

 //******字体大小********
 textLabel.font=[UIFont systemFontOfSize:self.fontOfSize];

 //label标签tag值
 textLabel.tag=LABEL_TAG_INIT + i + 100 * j;

 //每创建一个label在contenSize上加上一个label的宽度
 self.contentSize=CGSizeMake(self.contentSize.width+labelW, self.bounds.size.height);

 [self addSubview:labelBackGroundView];
 [self addSubview:textLabel];

 }
 }

}

这里注意定时器timer的使用,要将timer加入到runloop里,注意是CommonModes,如果用defaultModes的话就会出现卡顿(与滑动等事件处于同一runLoop,系统会优先响应滑动)

小tips:定时器是可以暂停的

NSTimer 系统是没有提供暂停的方法的,方法列表中只提供了-fire(启动) 和 -invalidate(废除)两个方法,invalidate后是完全废除不可再重启

但是这里有个@property (copy) NSDate *fireDate的属性,我们可以借助这个属性来实现定时器的暂停和重启

 //立即启动定时器
 [timer setFireDate:[NSDate date]];

//暂停定时器
 [timer setFireDate:[NSDate distantFuture]];

是不是有种很奇妙的感觉,这里利用定时器的启动时间属性巧妙的达到了暂停和重启的目的

//************自动滚动timer************
 NSTimer *timer=[NSTimer scheduledTimerWithTimeInterval:SCROLL_TIME_INTERVAL target:self selector:@selector(autoScroll) userInfo:nil repeats:YES];

 [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];

 //立即启动定时器
 [timer setFireDate:[NSDate date]];

 self.timer=timer;

这里是定时器驱动scrollView滚动的方法

这里注意了如果要达到字幕连续滚动不断帧的效果的话,timer调用需要非常频繁(1秒调用10次以上),此时再看看CPU使用率.瞬间飙升了20%左右,虽然还在能接受的范围,但在这种小地方耗费CPU显然不划算

解决方法:给个动画过渡就好了嘛,UIView animateWithDuration轻松应付,过渡很流畅,世界也瞬间安静了。

后遗症:用动画过渡唯一的问题就是,控制器跳转后再回来的话,动画会直接结束跳到尾帧,细心的用户会发觉这奇怪的地方,这就只有在性能和效果之间调和一下取最优解了

//滚动时间间隔
#define SCROLL_TIME_INTERVAL 3

//每次滚动距离
#define SCROLL_DISTANCE 100
//自动滚动
- (void)autoScroll{

 //滚动速度
 CGFloat offSet=SCROLL_DISTANCE;

 //若果字幕滚动到第二部分重复的部分则把偏移置0,设为第一部分,实现无限循环
 if (self.contentOffset.x>=self.contentSize.width / 2) {

 self.contentOffset=CGPointMake(0, 0);
 }

 //切割每次动画滚动距离

 [UIView animateWithDuration:SCROLL_TIME_INTERVAL delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
  self.contentOffset=CGPointMake(self.contentOffset.x+offSet, self.contentOffset.y);
 } completion:nil];
}

总结

好了,以上就是这篇文章的全部内容了,亲们有什么意见和问题记得及时反馈哦,希望这篇文章的内容对大家的学习或者工作带来一定的帮助。

相关文章

  • IOS CoreLocation实现系统自带定位的方法

    IOS CoreLocation实现系统自带定位的方法

    本篇文章主要介绍了IOS Core Location实现系统自带定位的方法,非常具有实用价值,需要的朋友可以参考下。
    2017-02-02
  • iOS 9无法访问HTTP的解决方法

    iOS 9无法访问HTTP的解决方法

    这篇文章主要为大家详细介绍了iOS 9无法访问HTTP的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • iOS中日志同步获取NSLog重定向以及其他详解

    iOS中日志同步获取NSLog重定向以及其他详解

    在Objective-c开发程序的时候,有专门的日志操作类NSLog,它将指定的输出,输出到(stderr),我们可以利用Xcode的日志输出窗口,下面这篇文章主要给大家介绍了关于iOS中日志同步获取NSLog重定向以及其他的相关资料,需要的朋友可以参考下。
    2017-12-12
  • iOS应用设计模式开发中职责链(责任链)模式的实现解析

    iOS应用设计模式开发中职责链(责任链)模式的实现解析

    这篇文章主要介绍了iOS应用设计模式开发中职责链模式的相关实现解析,示例代码为传统的Objective-C,需要的朋友可以参考下
    2016-03-03
  • iOS开发输入自动填充UITextField背景色

    iOS开发输入自动填充UITextField背景色

    如何在iOS中实现输入时自动填充背景色的效果,首先,我们设置UITextField的背景色为初始颜色,然后,通过设置UITextField的代理,并监听UITextField的输入事件,我们在用户开始输入时将其背景色改变为高亮颜色,在用户结束输入时恢复为初始颜色
    2023-10-10
  • iOS调用高德地图SDK的完整步骤

    iOS调用高德地图SDK的完整步骤

    高德LBS开放平台将高德最专业的定位、地图、搜索、导航等能力,以API、SDK等形式向广大开发者免费开放,下面这篇文章主要给大家介绍了关于iOS调用高德地图SDK的完整步骤,需要的朋友可以参考下
    2021-11-11
  • 详解Swift 之clipped是什么如何用

    详解Swift 之clipped是什么如何用

    这篇文章主要介绍了详解Swift 之clipped是什么如何用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • iOS实现锁屏页面控制音乐播放

    iOS实现锁屏页面控制音乐播放

    这篇文章主要为大家详细介绍了iOS实现锁屏页面控制音乐播放,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • iOS实现文字水平无间断滚动效果

    iOS实现文字水平无间断滚动效果

    这篇文章主要为大家详细介绍了iOS实现文字水平无间断滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-08-08
  • iOS实现封装一个获取通讯录的工具类详解

    iOS实现封装一个获取通讯录的工具类详解

    这篇文章主要给大家介绍了关于iOS如何实现封装一个获取通讯录的工具类的相关资料,这是自己平时封装的一个工具类,使用非常方便,文中给出了详细的示例代码,需要的朋友们可以参考借鉴,下面随着小编来一起学习学习吧。
    2017-10-10

最新评论