手機(jī)里下載了很多新聞?lì)惖腁pp盈滴，當(dāng)然作為一個(gè)碼農(nóng)就算看新聞也會(huì)從技術(shù)的角度去思考一些內(nèi)容的實(shí)現(xiàn)過(guò)程嘉蕾，這也能幫你發(fā)現(xiàn)很多trick 画切，于是就有了本文
- 先看鳳凰新聞的動(dòng)畫(huà)效果
鳳凰banner.gif
- 作為一個(gè)懶惰而不愿意思考的碼農(nóng)荚恶，看見(jiàn)想要的東西當(dāng)然是Github姜贡，經(jīng)過(guò)一陣百度试吁，google之后鎩羽而歸，果然還是需要自己動(dòng)手楼咳。既然沒(méi)有現(xiàn)成demo熄捍，但是有成品啊
- 這個(gè)時(shí)候就該reveal神器發(fā)揮作用了，（ps:Reveal破解就不提了爬橡，一搜一大堆治唤，推薦一款插件RHRevealLoader，省去很多麻煩）
通過(guò)Reveal不難發(fā)現(xiàn)：
1. banner結(jié)構(gòu)就是常用的scrollview + 3個(gè)ContainerView的重用
2. 視覺(jué)差的效果并不是用ContainerView來(lái)實(shí)現(xiàn),ContainerView只作用為重用的父視圖
3. 動(dòng)畫(huà)大概是在ContainerView上的SubView(SetImage) 相對(duì)于 ScrollView的contentOffset來(lái)完成的
rea.png
hierarchy
- 既然思路很清晰了就可以開(kāi)始寫代碼了糙申，這里只貼出核心代碼
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];
}
視差動(dòng)畫(huà)代碼
//參數(shù)是scrollView的contentOffset.y
- (void)setOffsetWithFactor:(float)value{
CGRect selfToWindow = [self convertRect:self.bounds toView:self.window]; //當(dāng)前View的frame
CGFloat selfCenterX = CGRectGetMidX(selfToWindow); //當(dāng)前View的centerX
CGPoint windowCenter = self.window.center;
CGFloat selfOffsetX = selfCenterX - windowCenter.x; //偏移距離
CGAffineTransform transX = CGAffineTransformMakeTranslation(- selfOffsetX * value, 0);
self.contentIMG.transform = transX;
}
- 總的來(lái)說(shuō)這個(gè)東西并不存在實(shí)現(xiàn)上的難度宾添，難得是有這種idea并能夠在項(xiàng)目中原創(chuàng)出實(shí)用的效果.(再牛逼的搬運(yùn)工又有什么意義呢？柜裸，唉)
demo地址缕陕，歡迎star
- 最后看看實(shí)現(xiàn)的效果
YYBanner.gif
