iOS仿格瓦拉 輪播圖 Parallax Rolling Banner
作者：yuan
前言
在絕大多數(shù)的APP中架忌，產(chǎn)品經(jīng)理都會要求有一個輪播圖來展示重要的圖片與信息世舰。而大多數(shù)的輪播圖都是比較僵硬的Side By Side的滑動動畫俐芯。如何讓這一個枯燥的UI組件變得有趣蔑穴，并且有絲滑般的感覺呢？我想滾動視差會是一個不錯的選擇泥栖。
如果你經(jīng)常使用格瓦拉，我想你也許就會注意到，格瓦拉的首頁就有著這么一個有意思的視差滾動視圖阴绢。讓我們來嘗試實現(xiàn)它吧。
思考與觀察
在滑動scrollView時艰躺，仔細觀察呻袭，你會發(fā)現(xiàn)在這個視差里面包含了兩組動畫
- 每當你向右滑動時，中間視圖會跟隨你的手指一起向右移動腺兴，但中間視圖里面的圖片則會朝左邊的方向移動左电。 你向左滑動是則相反。
- 每當你向右滑動時页响，中間視圖會跟隨你的手指一起向右滑動篓足，而左邊的視圖卻朝向相反的方向移動。你向左滑動是則相反闰蚕，右邊的視圖卻朝向相反的方向移動
這時栈拖，我想你就應該想到，它并不是像大多數(shù)的滾動試圖一樣没陡。不是使用N(你需要顯示的圖片數(shù))+2個視圖撲在UIScrollView上來實現(xiàn), 而是使用了4個主要的視圖:
@property (nonatomic, strong)UIView * midContainter;
@property (nonatomic, strong)UIImageView * midImage;
@property (nonatomic, strong)UIImageView * leftImage;
@property (nonatomic, strong)UIImageView * rightImage;
其中涩哟，midImage是加載在midContainer上的索赏，以產(chǎn)生第一組動畫。而midContainer贴彼、leftImage潜腻、rightImage這三個視圖有著不同的，層次之間的圖層關系锻弓，中間圖層midContainer總是處于另外兩個圖層的上方砾赔，同時三個圖層的在ScrollView中的位置些許的重疊， 這里我們使用一個portion來統(tǒng)一標識重疊的比例
//中間視圖與它的圖片
_midContainter.frame = CGRectMake(self.bounds.size.width, 0, self.bounds.size.width, self.bounds.size.height);
_midContainter.clipsToBounds = YES;//超出bounds rect的視圖講不會顯示
[self addSubview:_midContainter];
_midImage.frame = self.midContainter.bounds;
[self.midContainter addSubview:_midImage];
//左側視圖
_leftImage.frame = CGRectMake(self.bounds.size.width * (1- self.portion), 0, 0, self.bounds.size.width, self.bounds.size.height);
[self insertSubview:self.leftImage belowSubview:self.midContainter];
//右側視圖
_rightImage.frame = CGRectMake(self.bounds.size.width * (1 + self.portion), 0, self.bounds.size.width, self.bounds.size.height);
[self insertSubview:self.rightImage belowSubview:self.midContainter];
格瓦拉的實際視圖結構:
初始化設置
知道我們需要哪些Views青灼，下面就是對一我們的ScrollView和它的視圖進行初始化的設置了：
//初始化設置
- (void)setup{
self.contentSize = CGSizeMake(self.bounds.size.width*3, 0);
self.contentOffset = CGPointMake(self.bounds.size.width, 0);
self.portion = 0.6f;
self.pagingEnabled = NO;
self.showsVerticalScrollIndicator = NO;
self.showsHorizontalScrollIndicator = NO;
self.bounces = NO;
self.layer.masksToBounds = YES;
}
//根據(jù)currentIndex重置srollView為最開始狀態(tài)暴心。
- (void)resetSubViews {
self.midImage.image = self.sourceArr[self.pageControl.currentPage];
self.midImage.tag = self.pageControl.currentPage;
self.midImage.frame = self.midContainter.bounds;
NSInteger leftIndex = self.pageControl.currentPage - 1;
if (leftIndex < 0) {
leftIndex = self.sourceArr.count - 1;
}
self.leftImage.image = self.sourceArr[leftIndex];
self.leftImage.tag = leftIndex;
self.leftImage.frame = CGRectMake(self.bounds.size.width * (1- self.portion), 0, 0, self.bounds.size.width, self.bounds.size.height);
NSInteger rightIndex = self.pageControl.currentPage + 1;
if (rightIndex >= self.sourceArr.count) {
rightIndex = 0;
}
self.rightImage.image = self.sourceArr[rightIndex];
self.rightImage.tag = rightIndex;
self.rightImage.frame = CGRectMake(self.bounds.size.width * (1 + self.portion), 0, self.bounds.size.width, self.bounds.size.height);
[self bringSubviewToFront:self.midContainter];
[self sendSubviewToBack:self.leftImage];
[self sendSubviewToBack:self.rightImage];
[self setContentOffset:CGPointMake(self.bounds.size.width, 0) animated:NO];
self.currentIndex = self.pageControl.currentPage;
}
實現(xiàn)
此外，為了能讓這個視圖循環(huán)滾動杂拨，我們還需要監(jiān)聽滾動時UIScrollView的contentOffset.x专普。在監(jiān)聽過程中，我們可以根據(jù)self.portion來調(diào)整每個視圖的移動速度弹沽，以此來達到一個滾動視差的效果
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat moveX = scrollView.contentOffset.x - self.bounds.size.width;
[self adjsutSubViews:moveX];
if (fabs(moveX) >= self.bounds.size.width && fabs(self.lastMoveX) < self.bounds.size.width) {
[self completedHandler];
}
self.lastMoveX = moveX;
}
- (void)adjustSubViews:(CGFloat)moveX{
[self move:self.midImage from:0 byX:moveX * (1 - self.portion)];
[self move:self.leftImage from:self.bounds.size.width * (1- self.portion) byX:moveX * (1- self.portion)];
[self move:self.rightImage from:self.bounds.size.width * (1 + self.portion) byX:(moveX) * (1 - self.portion)];
}
#pragma mark - tools
- (void)move:(UIView *)view from:(CGFloat)start byX:(CGFloat)x {
CGRect frame = view.frame;
frame.origin.x = x + start;
view.frame = frame;
}
這幾行代碼的意義：
- 記錄
scrollview相對于初始位置的移動距離moveX - 使
leftimage與rightImage移動的速率與滑動距離moveX保持一個差值檀夹。 - 使
midImage與他的父視圖midContainer的移動速率保持不一致。注意我們這里移動的是midContainer里的圖片而不是midContainer - 如果當前的
moveX已經(jīng)已經(jīng)是一張圖片的寬度時策橘，調(diào)起completedHandler() - 記錄本次的
moveX距離到lastMoveX里炸渡，以方便下一次使用。
由于RunLoop的緣故丽已，
ScrollView代理對contentoffset記錄的會非常不精確蚌堵。scrollViewDidScroll()可能會重復調(diào)用completedHandler()。這里記錄lastMoveX是因為我們想確保：當moveX大于一張圖片寬度時沛婴，completedHandler()只被調(diào)起一次吼畏。當lastMoveX已經(jīng)大于一張圖片寬度時，說明completedHandler()已被調(diào)用嘁灯，不需要再重復調(diào)用泻蚊。
在completedHandler()里面，我們需要做的是每當一張新圖片被完整顯示在屏幕上時丑婿，不管他是letfImage還是rightImage,我們需要把這張圖片重新賦值到midContainer的midImage上面性雄，并根據(jù)這個圖片的index計算出新的leftImage與rightImage。同時欺騙用戶,調(diào)用resetSubViews(),把scrollView的offset重新設置為初始值(顯示中間視圖)：
//重新計算letimage, midImage,rightImage的index
- (void)completedHandler{
CGFloat moveX = self.contentOffset.x - self.bounds.size.width;
if (fabs(moveX) >= self.bounds.size.width) {
if (moveX > 0 && self.pageControl.currentPage + 1 < self.sourceArr.count) {
self.pageControl.currentPage++;
} else if (moveX >0 && self.pageControl.currentPage +1 == self.sourceArr.count) {
self.pageControl.currentPage = 0;
} else if (self.pageControl.currentPage >= 1){
self.pageControl.currentPage--;
} else if (self.pageControl.currentPage == 0 && moveX < 0) {
self.pageControl.currentPage = self.sourceArr.count - 1;
}
[self resetSubViews];
}
}
做完這些羹奉，在設置ScrollView的pagingEnabled屬性為YES
self.pagingEnabled = YES;
就可以大致完成一個簡單的視差滾動視圖了毅贮。看一下效果：
完整的代碼可以在這里下載尘奏。
但是這是你會發(fā)現(xiàn)，當你滑動你的視圖時病蛉，視差滾動視圖并沒有像格瓦拉那樣有如絲般順滑的感覺炫加。格瓦拉到底做了什么呢瑰煎，你可以不妨思考一下？下一篇俗孝，將優(yōu)化滑動動畫酒甸，帶來如絲般的順滑感覺
