美文网首页iOS软件开发上海恩美路演iOS学习
有滑动视觉效果的简单的无限轮播

有滑动视觉效果的简单的无限轮播

作者: 沉默学飞翔 | 来源:发表于2016-10-12 14:51 被阅读181次

前提

需求前提

因为需要这样一个视觉的效果,但是网上找了基本上差强人意。所以自己动手做了一个,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简易,如有不适,多多包涵!!!

相关文章

  • 有滑动视觉效果的简单的无限轮播

    前提 需求前提 因为需要这样一个视觉的效果,但是网上找了基本上差强人意。所以自己动手做了一个,demo可能有些简陋...

  • ios无限轮播图

    一个非常简单但很实用的无限轮播图(swift版本)UICollectionView无限轮播效果已经有很多前辈定制过...

  • 轮播图的无限循环滑动

    1.第一种做法:假如说有三张图片分别是a、b、c,我就再放三张图片还是之前的图片a、b、c,这样就有六张图了。然后...

  • iOS ScrollView 的重用

    支持的功能: 无限轮播 定时器轮播 重用 原理:利用3(0 1 2)个视图不断的切换,滑动结束的时候始终让1显示在...

  • ViewPager图片轮播小练习

    1. 图片轮播 学习资料: Viewpager实现真正的无限滑动,拒绝Integer.MAX_VALUE 安卓日记...

  • BannerView-无限轮播图控件

    轮播图控件,封装ViewPager,支持无限循环轮播,支持三种常用页面特效,支持设置指示器,支持自动切换手动滑动和...

  • NSTimer和拖拽冲突的问题解决

    问题: 比如我们界面顶部有个无限轮播图,而下面有个tableView,当我们上下滑动tableView时,会发现定...

  • Android-自定义-RecyclerView.LayoutM

    不得不说RecyclerView真的很强大,例如无限轮播Banner,滑动卡片等都有RecyclerView的版本...

  • 4.6无限轮播

    无限轮播跟左右轮播还是有区别的.无限轮播就是自己无限的轮播下去.不经过人为的触发,不过它的原理还是与左边的距离为参...

  • PageView学习

    PageView控件可以实现一个“图片轮播”的效果,PageView不仅可以水平滑动也可以垂直滑动,简单用法如下:...

网友评论

  • Web的美容师:什么玩意 没看懂
  • NJ_墨:快速滑动,会有问题:

    //无限轮播处理
    - (void)p_alwaysScrollView
    里的== 需要改为 <= >=;
    沉默学飞翔:@NJ_墨 好的,感谢,我测试下
  • shineDeveloper:请问你代码的图片和效果图是怎样加到简书里的?代码的那个应该不是图片吧,效果图是视频吗?
    shineDeveloper:@沉默学飞翔 我该怎么做才能把mark Down 的效果展示到简书上?
    shineDeveloper:@沉默学飞翔 嗯嗯,我在简书上输入markdow 的语法,没有任何效果,就是输入代码的‘’这样的语法。markDown 是可以展示的,简书上不行的
    沉默学飞翔: @细雨999 效果图直接gif图,文章用markdown语法编写代码就是这种形式了。你去github看一下人家的项目底下的介绍都是这种语法。直接搜索markdown你就知道了

本文标题:有滑动视觉效果的简单的无限轮播

本文链接:https://www.haomeiwen.com/subject/ukeiyttx.html