您的位置:首页 > 移动开发 > IOS开发

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

2016-09-08 14:49 691 查看

效果图

开始上代码

滚动字幕的原理是用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=[NSTimerscheduledTimerWithTimeInterval: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 滚动 字幕