iOS仿格瓦拉 輪播圖 Parallax Rolling Banner
作者：yuan
前言
在上一篇中灰蛙，我們實(shí)現(xiàn)了一個(gè)視差滾動(dòng)的輪播圖，但是它是由通過(guò)設(shè)置UIScrollView的pageEnable的屬性來(lái)實(shí)現(xiàn)的挚歧。 然而你會(huì)發(fā)現(xiàn)他并沒(méi)有像格瓦拉的滾動(dòng)視圖那樣絲滑，減速動(dòng)畫(huà)阻尼巨大
格瓦拉的滾動(dòng)視圖：
優(yōu)化思路
既然系統(tǒng)提供的分頁(yè)方式不能滿(mǎn)足我們吁峻，那么我們?nèi)绾巫约簩?shí)現(xiàn)一個(gè)paging的效果呢滑负？答案就在Apple的官方文檔里面，在查閱UIScrollView的代理后用含，我們可以發(fā)現(xiàn)里面有這樣一個(gè)代理方法：
//scrollView The scroll-view object where the user ended the touch..
//velocity The velocity of the scroll view (in points) at the moment the touch was released.
//targetContentOffset The expected offset when the scrolling action decelerates to a stop.
//Your application can change the value of the targetContentOffset parameter to adjust where the scrollview finishes its scrolling animation.
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView
withVelocity:(CGPoint)velocity
targetContentOffset:(inout CGPoint *)targetContentOffset
在這個(gè)方法中有一個(gè)targetContentOffset的參數(shù)矮慕，文檔里指出，我們可以通過(guò)修改這個(gè)參數(shù)啄骇，來(lái)改變scrollView在滑動(dòng)動(dòng)畫(huà)結(jié)束時(shí)的位置痴鳄。 Bingo， 這就是我們想要的缸夹！通過(guò)修改targetContentOffset直接修改目標(biāo)offset為整數(shù)頁(yè)位置
實(shí)現(xiàn)
我們所需要的paging：
- 設(shè)置滑動(dòng)阻尼痪寻，當(dāng)滑動(dòng)沒(méi)有達(dá)到滑動(dòng)阻尼位置時(shí)螺句，標(biāo)記這次滑動(dòng)為
cancel，并修改targetContentOffset.x為起始位置self.bounds.size.width - 當(dāng)已經(jīng)超過(guò)滑動(dòng)阻尼時(shí)橡类， 標(biāo)記這次滑動(dòng)為
complete,并通過(guò)滑動(dòng)方向計(jì)算相應(yīng)的targetContentOffset.x結(jié)束位置為0或者self.bounds.size.width * 2
核心代碼：
- (CGFloat)targetOffsetForMoveX:(CGFloat)moveX velocity:(CGFloat)velocity{
BOOL complete = fabs(moveX) >= self.bounds.size.width * 0.3 ||
(fabs(velocity) > 0 && fabs(moveX) >= self.bounds.size.width * 0.1 )? YES : NO;
BOOL leftDirection = moveX > 0 ? YES : NO;
if (complete) {
if (leftDirection) {
return self.bounds.size.width * 2;
}
return 0; //right Direction
}else {
return self.bounds.size.width;//cancel
}
}
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset {
if (self.pagingEnabled)return;
CGFloat moveX = scrollView.contentOffset.x - self.bounds.size.width;
CGFloat targetX = [self targetOffsetForMoveX:moveX velocity:velocity.x];
if (targetX == self.bounds.size.width) {//cancel
targetContentOffset->x = scrollView.contentOffset.x;
[self setContentOffset:CGPointMake(targetX, targetContentOffset->y) animated:YES];
} else {//complete
targetContentOffset->x = targetX;
}
}
注意在這里我們做了一些優(yōu)化壹蔓，當(dāng)滑動(dòng)被判斷為cancel時(shí)，我們并沒(méi)有直接把其實(shí)位置self.bounds.size.width賦值給targetContentOffset->x猫态。那是因?yàn)橛度兀?jīng)常我們的滑動(dòng)的時(shí)候會(huì)伴隨加速度velocity.x。當(dāng)targetContentOffset->x與scrollView的contentOffset.x非常相近亲雪，又伴隨加速度velocity.x時(shí)勇凭，cancel的滑動(dòng)動(dòng)畫(huà)的持續(xù)時(shí)間就會(huì)非常短。這帶來(lái)的滑動(dòng)體驗(yàn)非常不好义辕。
在這里虾标，我們放棄修改targetContentOffset->x為起始值，轉(zhuǎn)而直接把他賦值為當(dāng)前的contentOffset.x灌砖，這樣滑動(dòng)手勢(shì)所帶來(lái)的velocity.x就不會(huì)影響到cancel的滑動(dòng)動(dòng)畫(huà);同時(shí)我們?cè)偈褂孟到y(tǒng)自帶的方法來(lái)完成這個(gè)cancel的結(jié)束動(dòng)畫(huà)
[self setContentOffset:CGPointMake(targetX, targetContentOffset->y) animated:YES]
RunLoop 與 targetContentOffset
如果你注意觀(guān)察璧函，你會(huì)發(fā)現(xiàn)：當(dāng)我們修改scrollView的targetContentOffset時(shí)，scrollView會(huì)有一次準(zhǔn)確的contentOffset等于targetContentOffset的回調(diào)-scrollViewDidScroll:基显。我們暫時(shí)把這個(gè)回調(diào)叫作準(zhǔn)確回調(diào)
由于RunLoop的原故蘸吓，在代理方法
-(void)scrollViewDidScroll:中對(duì)于scrollView的contentOffset監(jiān)聽(tīng)非常不精確。所以我們很可能拿到和我們所期望值不一樣的contentOffset
如果我們?cè)谧罱咏?code>準(zhǔn)確回調(diào)的回調(diào)里修改了scrollView的contentOffset撩幽，ie: 設(shè)置contentOffset.x為self.bounds.size.width库继，同時(shí)緊接著在準(zhǔn)確回掉里又把contentOffset.x設(shè)置為其它值。 那么-(void)scrollViewDidScroll:里面對(duì)于視圖位置的修改可能就會(huì)出現(xiàn)錯(cuò)誤窜醉。因此我們需要加一些處理：
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat moveX = scrollView.contentOffset.x - self.bounds.size.width;
if (fabs(self.lastMoveX)>= self.bounds.size.width) {
//prevent method scrollViewWillEndDragging: withVelocity: targetContentOffset: reload the image postion,
//so we reset scrollview to init postion and return,
[self resetSubViews];
self.lastMoveX = 0;
return;
}
[self adjustSubViews:moveX];
if (fabs(moveX) >= self.bounds.size.width) {
[self completedHandler];
}
self.lastMoveX = moveX;
}
到這里宪萄，我們使用targetContentOffset來(lái)實(shí)現(xiàn)Paging的效果就結(jié)束了。 我們來(lái)看一下效果對(duì)比：
<center>targetContentOffset</center>
<center>pageEnable</center>
GIF可能不是很明顯榨惰，如果你下載了項(xiàng)目拜英，運(yùn)行起來(lái)。你將會(huì)看到非常明顯的差異
總結(jié)
當(dāng)你同時(shí)在-(void)scrollViewDidScroll:與- (void)scrollViewWillEndDragging:withVelocity:targetContentOffset:里面對(duì)contentOffset做修改時(shí)你需要格外小心琅催。因?yàn)镽unLoop的原故,contentOffset檢測(cè)是十分不精確的.在你修改contentOffset時(shí)居凶，-(void)scrollViewDidScroll:會(huì)被反復(fù)調(diào)起。
使用pageEnable實(shí)現(xiàn)分頁(yè)恢暖，你將會(huì)失去：
- 如絲般的順滑
- 只能以frame size為單位翻頁(yè)排监，減速阻尼巨大，減速過(guò)程不超過(guò)一頁(yè)
- 不能自由控制動(dòng)畫(huà)complete與cancel的的滑動(dòng)比例
使用targetContentOffset實(shí)現(xiàn)Paging杰捂，減速過(guò)程流暢。并且可以實(shí)現(xiàn)一屏多頁(yè)的效果棋蚌。大家可以自行發(fā)揮嫁佳。
想體驗(yàn)如絲般順滑請(qǐng)戳這里
