手機里下載了很多新聞類的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