『ios』动画篇-记一次无限循环轮播
2018-07-31 本文已影响84人
butterflyer
故事的缘由还是之前的一次面试,当时没回答好,当然最主要的原因是自己没亲自写过。
无限轮播有两种写法,第一种是 有多少张图就有多少个imageview,然后在图的两边多加两个imageview来负责切换,这种肯定耗内存啊。这是我之前回答的一种,其实这次我说的是第二种。
轮播动画,直接说如果三个imageview实现无限轮播。
![](https://img.haomeiwen.com/i2440780/7637bbf27385a27e.gif)
_ImageArray = pageViews;
_pageCount = pageViews.count;
if (pageViews.count > 1) {
_scrollView.contentSize = CGSizeMake(CGRectGetWidth(self.frame)*3, CGRectGetHeight(self.frame));
}else{
_scrollView.contentSize = CGSizeMake(CGRectGetWidth(self.frame)*1, CGRectGetHeight(self.frame));
}
_pageControl.numberOfPages = _pageCount;
_tapBlock = block;
for (int i = 0; i<3; i++) {
UIImageView *page = [[UIImageView alloc] init];
page.frame = CGRectMake(self.frame.size.width * i, 0, self.frame.size.width, self.frame.size.height);
page.tag = 1000 + I;
[_scrollView addSubview:page];
}
UIImageView *leftPage = [_scrollView viewWithTag:1000];
UIImageView *middlePage = [_scrollView viewWithTag:1001];
UIImageView *rightPage = [_scrollView viewWithTag:1002];
leftPage.image = _ImageArray.lastObject; //刚开始 中间的肯定是显示第一张 左边的显示倒数第一张 右边的显示第二张图片
middlePage.image = _ImageArray.firstObject;
if (pageViews.count > 1) { //针对如果只有一张图片的情况
rightPage.image = _ImageArray[1];
}else{
rightPage.image = _ImageArray[0];
}
_scrollView.contentOffset = CGPointMake(self.frame.size.width,0);//首先显示中间的view
_pageControl.currentPage = 0;
_prePageIndex = 0;
if (pageViews.count > 1) {
[self startTimer]; //开始计时器开始移动
}
新建三个imageview放到scrollview里,刚开始显示肯定是显示中间的那个imagview。
然后最重要的就是根据滚动来设置当前显示的图片。下面是主要代码。
// 每次滑动完了之后又重新设置当前显示的page时中间的page
UIImageView *leftPage = [_scrollView viewWithTag:1000];
UIImageView *middlePage = [_scrollView viewWithTag:1001];
UIImageView *rightPage = [_scrollView viewWithTag:1002];
if (_pageControl.currentPage == _pageCount - 1)//如果是到了最后一个,则中间的显示最后一个,左边的显示倒数第二个 右边的显示第一个
{
// n- 1 -> n -> 0
leftPage.image = _ImageArray[_pageControl.currentPage - 1];
middlePage.image = _ImageArray[_pageControl.currentPage];
rightPage.image = _ImageArray.firstObject;
}
else if (_pageControl.currentPage == 0)//如果是第一个 则中间的显示第一个 左边显示倒数第一个 右边显示第二个
{
// n -> 0 -> 1
// 到尾部了,改成从头开始
leftPage.image = _ImageArray.lastObject;
middlePage.image = _ImageArray.firstObject;
rightPage.image = _ImageArray[1];
}
else //其他情况
{
// x - 1 -> x -> x + 1
leftPage.image = _ImageArray[_pageControl.currentPage - 1];
middlePage.image = _ImageArray[_pageControl.currentPage];
rightPage.image = _ImageArray[_pageControl.currentPage + 1];
}
// 重新设置偏移量
_scrollView.contentOffset = CGPointMake(self.frame.size.width, 0);
demo地址(https://github.com/Butteryflyyer/XHBannerScroll)