iOS黑科技【动画特效篇-3】 滚动字幕--ScrollCanvas

iOS黑科技【动画特效篇】第三期

这一期带来一款应用非常实用的控件，滚动字幕，可以应用在新闻、财经、聊天等各类APP上，B格瞬间提升了一个档次有木有

scrollCanvas.gif

话不多说，github走一波，已封装可直接只用，留有一个便捷初始方法及各种属性接口
https://github.com/XMDashen/XMScrollCanvas.git
顺便给个星哦！(* ￣3)(ε￣ *)

开始上代码

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

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

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

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

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

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

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

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

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

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

#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

这里注意定时器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];
}

这一期就到这里了，亲们有什么意见和问题记得及时反馈哦，喜欢的话点个关注给个赞(づ￣3￣)づ╭❤～
我们下期再会