Demo地址:https://github.com/FlashHand/BuffKit
運行BuffDemo里的工程鄙皇,找到輪播圖即可查看。
使用簡介:
{
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是滑動動畫的持續(xù)時間.
bfLoopView=[BFLoopView loopViewWithItems:btnArr
frame:CGRectMake(0, 64, self.view.width, 220) loopPeriod:4
animationDuration:1
animationStyle:BuffLoopViewAnimationStyleEasyInOut
indexChanged:^(NSInteger loopIndex) {
//當(dāng)前頁面索引變化時執(zhí)行的回調(diào)
}];
[self.view addSubview:bfLoopView];
[bfLoopView setShouldAnimation:YES];//開始并允許自動輪播,
[bfLoopView setShouldAnimation:NO];//停止并禁止自動輪播雾叭,
實現(xiàn)自動輪播的思路:
1.使用無限寬的UISCrollView(實際上是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偏居中的位置,下面是計算方法,這樣算的好處是:一是能確保初始位置是偏居中的汤纸,二是確保初始位置的偏移量是單頁寬度的整數(shù)倍
CGFloat initialOffsetX=floor(loopView.contentSize.width/2.0/loopItems.count/loopView.width)*loopView.width*loopItems.count;
[loopView setContentOffset:CGPointMake(initialOffsetX, 0)];
3.控制自動輪播
通過CADisplayLink+NSTimer實現(xiàn)對UIScrollView的準(zhǔn)確控制衩茸,
若使用UIView或UIScrollView自帶的動畫則動畫的時間曲線不好控制,輪播時可能會卡住且沒法處理贮泞。
NSTimer控制何時開始播放動畫
CADisplayLink配合CACurrentMediaTime()控制動畫的播放過程
具體請查看demo
4.關(guān)于動畫的時間曲線,時間曲線是通過這個block去計算的
static void(^_bfAnimationFunction)(CGFloat p);
當(dāng)你需要自定義時間曲線函數(shù)的時候可以通過調(diào)用
setLoopAnimationStyle:BuffLoopViewAnimationStyleCustom
然后使用“
-(void)setCustomAnimationStyle:(void(^)(CGFloat p))animationFunction;”來實現(xiàn)自定義的時間曲線楞慈,且該函數(shù)必須滿足f(0)=0,f(1)=1
預(yù)先設(shè)置block可以避免在CADisplayLink的觸發(fā)的函數(shù)里做多余的判斷幔烛,導(dǎo)致性能降低
下面是不同的時間曲線的映射方法:
算法參考:
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.添加頁面切換回調(diào):
static void(^_bfIndexChanged)(NSInteger i);
默認會顯示一個UIPageControl饿悬,若不需要刻意隱藏掉然后利用_bfIndexChanged獲取頁面切換情況。
你可以直接運行demo,找到LoopViewController查看輪播圖的使用方式聚霜。
如果你有任何問題或意見狡恬,歡迎通過簡書留言: )