Demo地址:https://github.com/FlashHand/BuffKit
運(yùn)行BuffDemo里的工程,找到輪播圖即可查看。
使用簡(jiǎn)介:
{
BFLoopView *bfLoopView;
}
//.m
NSMutableArray *btnArr=[NSMutableArray new];
for (int i=0; i<3; i++) {
UIButton *btn=[[UIButton alloc]initWithFrame:CGRectMake(0, 0, self.view.width, 220)];
[btn setTitle:[NSString stringWithFormat:@"Button:%d",i] forState:UIControlStateNormal];
UIImage *img=[UIImage imageNamed:[NSString stringWithFormat:@"loop%d.jpg",i+1]];
[btn setBackgroundImage:img forState:UIControlStateNormal];
[btn setBackgroundColor:[UIColor lightGrayColor]];
[btn addTarget:self action:@selector(loopViewClickAction:) forControlEvents:UIControlEventTouchUpInside];
[btn setTag:i];
[btnArr addObject:btn];
}
//period是播放周期,duration是滑動(dòng)動(dòng)畫的持續(xù)時(shí)間.
bfLoopView=[BFLoopView loopViewWithItems:btnArr
frame:CGRectMake(0, 64, self.view.width, 220) loopPeriod:4
animationDuration:1
animationStyle:BuffLoopViewAnimationStyleEasyInOut
indexChanged:^(NSInteger loopIndex) {
//當(dāng)前頁(yè)面索引變化時(shí)執(zhí)行的回調(diào)
}];
[self.view addSubview:bfLoopView];
[bfLoopView setShouldAnimation:YES];//開(kāi)始并允許自動(dòng)輪播,
[bfLoopView setShouldAnimation:NO];//停止并禁止自動(dòng)輪播,
實(shí)現(xiàn)自動(dòng)輪播的思路:
1.使用無(wú)限寬的UISCrollView(實(shí)際上是INT16_MAX+1
[loopView setPagingEnabled:YES];
[loopView setBounces:NO];
[loopView setContentSize:CGSizeMake(frame.size.width*(INT16_MAX+1), frame.size.height)];
[loopView setShowsVerticalScrollIndicator:NO];
[loopView setShowsHorizontalScrollIndicator:NO];
[loopView setDirectionalLockEnabled:YES];
2.放置所有視圖,這里我決定把視圖放置在UISCrollView偏居中的位置,下面是計(jì)算方法,這樣算的好處是:一是能確保初始位置是偏居中的,二是確保初始位置的偏移量是單頁(yè)寬度的整數(shù)倍
CGFloat initialOffsetX=floor(loopView.contentSize.width/2.0/loopItems.count/loopView.width)*loopView.width*loopItems.count;
[loopView setContentOffset:CGPointMake(initialOffsetX, 0)];
3.控制自動(dòng)輪播
通過(guò)CADisplayLink+NSTimer實(shí)現(xiàn)對(duì)UIScrollView的準(zhǔn)確控制,
若使用UIView或UIScrollView自帶的動(dòng)畫則動(dòng)畫的時(shí)間曲線不好控制,輪播時(shí)可能會(huì)卡住且沒(méi)法處理。
NSTimer控制何時(shí)開(kāi)始播放動(dòng)畫
CADisplayLink配合CACurrentMediaTime()控制動(dòng)畫的播放過(guò)程
具體請(qǐng)查看demo
4.關(guān)于動(dòng)畫的時(shí)間曲線,時(shí)間曲線是通過(guò)這個(gè)block去計(jì)算的
static void(^_bfAnimationFunction)(CGFloat p);
當(dāng)你需要自定義時(shí)間曲線函數(shù)的時(shí)候可以通過(guò)調(diào)用
setLoopAnimationStyle:BuffLoopViewAnimationStyleCustom
然后使用“
-(void)setCustomAnimationStyle:(void(^)(CGFloat p))animationFunction;”來(lái)實(shí)現(xiàn)自定義的時(shí)間曲線,且該函數(shù)必須滿足f(0)=0,f(1)=1
預(yù)先設(shè)置block可以避免在CADisplayLink的觸發(fā)的函數(shù)里做多余的判斷,導(dǎo)致性能降低
下面是不同的時(shí)間曲線的映射方法:
算法參考:
http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html
https://github.com/danro/jquery-easing/blob/master/jquery.easing.js
//easing 算法
//x ∈ [0,1]
//Linear:f(x)=x
BuffLoopViewAnimationStyleLinear = 1,
//easyIn:f(x)=-cos(x * (M_PI/2)+1
BuffLoopViewAnimationStyleEasyIn = 2,
//easyInOut:f(x)=-0.5*cos(M_PI*x)+0.5
BuffLoopViewAnimationStyleEasyInOut = 3,
//easyOut:f(x)=sin(x * M_PI/2)
BuffLoopViewAnimationStyleEasyOut = 4,
//custom:使用 "-(void)setAnimationStyle:(void(^)(CGFloat p))animationFunction;"自定義切換效果。
//注意,必須滿足f(0)=0,f(1)=1
BuffLoopViewAnimationStyleCustom = 100,
5.添加頁(yè)面切換回調(diào):
static void(^_bfIndexChanged)(NSInteger i);
默認(rèn)會(huì)顯示一個(gè)UIPageControl,若不需要刻意隱藏掉然后利用_bfIndexChanged獲取頁(yè)面切換情況。
你可以直接運(yùn)行demo,找到LoopViewController查看輪播圖的使用方式。
如果你有任何問(wèn)題或意見(jiàn),歡迎通過(guò)簡(jiǎn)書留言: )