iOS 实现凤凰新闻的视觉差轮播图

手机里下载了很多新闻类的App，当然作为一个码农就算看新闻也会从技术的角度去思考一些内容的实现过程，这也能帮你发现很多trick ，于是就有了本文

• 先看凤凰新闻的动画效果

凤凰banner.gif

• 作为一个懒惰而不愿意思考的码农，看见想要的东西当然是Github，经过一阵百度，google之后铩羽而归，果然还是需要自己动手。既然没有现成demo，但是有成品啊
• 这个时候就该reveal神器发挥作用了，（ps:Reveal破解就不提了，一搜一大堆，推荐一款插件RHRevealLoader，省去很多麻烦）

通过Reveal不难发现：

1.  banner结构就是常用的scrollview +  3个ContainerView的重用
2.  视觉差的效果并不是用ContainerView来实现,ContainerView只作用为重用的父视图
3.  动画大概是在ContainerView上的SubView(SetImage) 相对于 ScrollView的contentOffset来完成的

rea.png

hierarchy

• 既然思路很清晰了就可以开始写代码了，这里只贴出核心代码

scrollView重用代码

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{

    div_t x = div(scrollView.contentOffset.x,scrollView.frame.size.width);

    if (x.quot == 0) {
        self.currentIndex -=1;
    }else if(x.quot == 2){
        self.currentIndex +=1;
    }
    
    [self setContainerImageViews];
    self.scrollView.contentOffset = CGPointMake(CGRectGetWidth(scrollView.bounds), 0);
    
    [self resumeTimer];
}

视差动画代码

//参数是scrollView的contentOffset.y
- (void)setOffsetWithFactor:(float)value{
    CGRect  selfToWindow = [self convertRect:self.bounds toView:self.window]; //当前View的frame
    CGFloat selfCenterX = CGRectGetMidX(selfToWindow); //当前View的centerX
    CGPoint windowCenter = self.window.center;
    CGFloat selfOffsetX = selfCenterX - windowCenter.x; //偏移距离
    
    CGAffineTransform transX = CGAffineTransformMakeTranslation(- selfOffsetX * value, 0);
    self.contentIMG.transform = transX;
}

• 总的来说这个东西并不存在实现上的难度，难得是有这种idea并能够在项目中原创出实用的效果.(再牛逼的搬运工又有什么意义呢？，唉)

demo地址，欢迎star

• 最后看看实现的效果

YYBanner.gif