偏移视觉效果的无限轮播

客官°小女子只卖身不卖艺 2022-07-16 08:53 148阅读 0赞

# 前提 #

### 需求前提 ###

因为需要这样一个视觉的效果，但是网上找了基本上差强人意。所以自己动手做了一个，demo可能有些简陋。但是我个人感觉思路应该是很清晰的，所以拿出来有需求的可以看一下思路。  
效果图:  
![效果][20161012145729705]

**[传送门][Link 1]**

**主线思路**

没有大神们的精确去计算每一次偏移的时候怎么去计算下一个偏移page的位置。主要感觉太麻烦，而且自己水平有限。就用了一个优点小奇葩的思路。既然运行的时候需要里面的图片产生视觉位移差效果，不如直接在外部scrollView做滑动的情况下，在加载一个小的scorllView专门去做图片的视觉偏移。开始的时候不确定这个思路行不行，就码代码去实验。  
![思路][20161012145751939]

# 核心代码 #

其实我这种做法很简单，核心代码就只有一小段

//视觉效果处理
    - (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简易，如有不适，多多包涵！！！

[20161012145729705]: /images/20220716/cef9d6f56ec5468daf5080029c4fb176.png
[Link 1]: https://github.com/sunyunfei/scrollView.git
[20161012145751939]: /images/20220716/9ad50d6f4c6a40cc9b9143c886adda82.png