前提
需求前提
因為需要這樣一個視覺的效果,但是網上找了基本上差強人意。所以自己動手做了一個,demo可能有些簡陋。但是我個人感覺思路應該是很清晰的,所以拿出來有需求的可以看一下思路。
效果圖:
主線思路
沒有大神們的精確去計算每一次偏移的時候怎么去計算下一個偏移page的位置。主要感覺太麻煩,而且自己水平有限。就用了一個優點小奇葩的思路。既然運行的時候需要里面的圖片產生視覺位移差效果,不如直接在外部scrollView做滑動的情況下,在加載一個小的scorllView專門去做圖片的視覺偏移。開始的時候不確定這個思路行不行,就碼代碼去實驗。
核心代碼
其實我這種做法很簡單,核心代碼就只有一小段
//視覺效果處理
- (void)p_visionDeal{
int intX = self.coreView.contentOffset.x / CGRectGetWidth(self.frame);
//獲取到tag對應的圖片(要注意是否是兩端的圖片)
ImageScrollView *nowImageScr = [self viewWithTag:intX + k_tagMargin + 1];
if (nowImageScr && (self.coreView.contentOffset.x - intX * CGRectGetWidth(self.frame))/2 <= CGRectGetWidth(self.frame) / 2) {
[nowImageScr setContentOffset:CGPointMake(-(self.coreView.contentOffset.x - intX * CGRectGetWidth(self.frame))/2 + CGRectGetWidth(self.frame) / 2, 0) animated:NO];
}
//判斷其他的頁是否正常,如果不正常轉換過來
for(int i = 0; i < self.dataArray.count + 2; i++){
if(i != intX + 1){
ImageScrollView *nowImageScr1 = [self viewWithTag:i + k_tagMargin];
if (nowImageScr1 && nowImageScr1.contentOffset.x != 0) {
[nowImageScr1 setContentOffset:CGPointMake(0, 0) animated:NO];
}
}
}
}
代碼里面也有注釋,應該很容易理解。
一句一句解釋一下
int intX = self.coreView.contentOffset.x / CGRectGetWidth(self.frame);
//獲取到tag對應的圖片(要注意是否是兩端的圖片)
ImageScrollView *nowImageScr = [self viewWithTag:intX + k_tagMargin + 1];
根據偏移量去獲取到現在界面展示的是第幾個page的圖片,然后把他的下一個圖片拿出來,準備做視覺位置偏移操作。
if (nowImageScr && (self.coreView.contentOffset.x - intX * CGRectGetWidth(self.frame))/2 <= CGRectGetWidth(self.frame) / 2) {
[nowImageScr setContentOffset:CGPointMake(-(self.coreView.contentOffset.x - intX * CGRectGetWidth(self.frame))/2 + CGRectGetWidth(self.frame) / 2, 0) animated:NO];
}
這個if語句里面有兩個條件
1,防止沒有這個tag對應的圖片導致在圖片不存在的情況還進行位置操作。
2,判斷現在進行的偏移量是否還是在這個當前界面contentOffset.x的范圍,為了防止圖片視覺偏移出現問題。比如現在正在顯示的是2這個下標對應的圖片,結果在你用力滑動的情況下,一次滑動到了4這個下標界面,那么可以3這個下標界面的圖片視覺偏移顯示就會出問題。
//判斷其他的頁是否正常,如果不正常轉換過來
for(int i = 0; i < self.dataArray.count + 2; i++){
if(i != intX + 1){
ImageScrollView *nowImageScr1 = [self viewWithTag:i + k_tagMargin];
if (nowImageScr1 && nowImageScr1.contentOffset.x != 0) {
[nowImageScr1 setContentOffset:CGPointMake(0, 0) animated:NO];
}
}
}
這段代碼是為了防止一種情況下產生圖片視覺偏移的不正確問題。比如現在正在顯示的是2這個下標對應的圖片,你在滑動到下標為3的過程中,在手勢沒中斷的情況下,又往下標為1的方向滑動,而且1,3的圖片都有顯示,這時候2這個下標的圖片可能就會有偏移問題的出現。因為在這個過程中計算的對應的需要做視覺偏移圖片的下標已經變了,從開始的3做視覺偏移,改變到了2做視覺偏移。而在改變視覺偏移圖片的下標的時候上一個圖片需要回到沒做視覺偏移的原始位置。不然你反復來回滑動幾次之后可能會發現,圖片右邊會無法到達做視覺偏移的scrollView的對應位置。
可能我表達你看著會感覺到云里霧里,但是只要你自己下載一下源碼,自己注釋運行就會很容易的發現這個問題。
結語
就是這樣簡單的一個demo,剛開始寫的時候陷入了一個思想,一直在想怎么去用一個scrollView即做無限輪播,又要去控制視覺偏移。結果放下來之后一想到scrollView的點擊放大的思路之后,瞬間想到這個。demo簡易,如有不適,多多包涵!!!