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

效果图

开始上代码
滚动字幕的原理是用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];}

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