登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

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

[复制链接]
来自: snun 分类: iOS精品源码 上传时间: 2016-10-12 14:54:28

项目介绍:

前提

需求前提

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

code4app

相关源码推荐:

我来说两句
*滑动验证:
所有评论(29)
phoiu 2016-10-12 17:29:33
感谢分享,code4app有你更精彩
回复
BlueManlove 2016-10-12 17:31:07
膜拜大神~
回复
hellokenken 2016-10-12 17:33:02
mark,收藏了
回复
littleRed 2016-10-12 17:35:56
mark,收藏了
回复
AlonMessi 2016-10-12 17:38:33
支持,感谢,祝code4app越来越好~
回复
kengsir 2016-10-12 17:42:44
好好 学习了 确实不错
回复
code4app热心网友 2016-10-13 09:49:03
楼主用心了,内容非常精彩。
回复
code4app热心网友 2016-10-13 09:49:23
学习学习!
回复
code4app热心网友 2016-10-13 10:47:32
很给力,Code4App有你更精彩!
回复
123下一页
提取码:  下载次数:118 状态:已购或VIP 售价:0(原价:10)金钱 下载权限:初级码农 
1042 2 118
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542

如何获得代码达人称号?

代码贡献英雄榜
用户名 下载数
通过邮件订阅最新 Code4App 信息
上一条 /4 下一条
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表