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