iOS 用Swipe手勢和動(dòng)畫實(shí)現(xiàn)循環(huán)播放圖片示例

更新時(shí)間：2017年03月01日 10:18:55 作者：34碼的小孩子

本篇文章主要介紹了iOS 用Swipe手勢和動(dòng)畫實(shí)現(xiàn)循環(huán)播放圖片示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。

主要想法

添加3個(gè)ImageView展示圖片，實(shí)現(xiàn)圖片的無限循環(huán)。
使用Swipe手勢識(shí)別用戶向右或向左滑動(dòng)圖片。
使用CATransition給ImageView.layer添加動(dòng)畫，展示圖片更換的效果。

實(shí)現(xiàn)

在storyboard添加三個(gè)UIImageView，用來展示圖片。而數(shù)組imageArray則用來保存圖片對(duì)象。

@interface ViewController ()

@property (strong, nonatomic) IBOutlet UIImageView *middleImage;
@property (strong, nonatomic) IBOutlet UIImageView *leftImage;
@property (strong, nonatomic) IBOutlet UIImageView *rightImage;
@property (strong, nonatomic) NSMutableArray *imageArray;

@end

在viewDidLoad方法中設(shè)置一些初始參數(shù)

- (void)viewDidLoad {
[super viewDidLoad];

[self initData];
[self initView];
[self circleSwipeToMiddleImage];
}

- (void)initData {
self.imageArray = [NSMutableArray new];
NSString *imageName;

for (int i = 0; i < 5; i++) {
  imageName = [NSString stringWithFormat:@"image%i", i];

  [self.imageArray addObject:[UIImage imageNamed:imageName]];
}
}

中間的UIImageView(middleImage)最開始展示的第一張圖。

- (void)initView {
self.middleImage.image = self.imageArray[0];

//在imageView中添加外框，比較容易區(qū)分三張圖片的位置
[self addBorder:self.middleImage];
[self addBorder:self.leftImage];
[self addBorder:self.rightImage];
}
- (void)addBorder:(UIImageView *)imageView {
imageView.layer.borderWidth = 1.0;
imageView.layer.borderColor = [UIColor lightGrayColor].CGColor;
}

接著在self.view上添加swipe手勢，分別是向左和向右輕掃。swipe手勢必須要指定direction輕掃方向，否則默認(rèn)是向右輕掃。

#pragma mark - 圖片循環(huán)播放

- (void)circleSwipeToMiddleImage {
UISwipeGestureRecognizer *gesture1 = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(circleSwipeImageToRight)];
gesture1.direction = UISwipeGestureRecognizerDirectionRight;
self.view.userInteractionEnabled = YES;

UISwipeGestureRecognizer *gesture2 = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(circleSwipeImageToLeft)];
gesture2.direction = UISwipeGestureRecognizerDirectionLeft;

[self.view addGestureRecognizer:gesture1];
[self.view addGestureRecognizer:gesture2];
}

然后實(shí)現(xiàn)輕掃響應(yīng)方法。

向右輕掃，middleImage顯示下一張圖片，則圖片的下標(biāo)index是當(dāng)前展示圖片的下標(biāo) + 1。而為了實(shí)現(xiàn)無限循環(huán)并不超出數(shù)組的下標(biāo)范圍，則需要%圖片數(shù)據(jù)的張數(shù)。

/**
 向右輕掃響應(yīng)方法
 */
- (void)circleSwipeImageToRight {
UIImage *currentImage = self.middleImage.image;
NSInteger index = [self.imageArray indexOfObject:currentImage];
index = (index + 1) % self.imageArray.count;

 [self changeAnimation:index toRight:YES];
}

向左輕掃，middleImage顯示上一張圖片，則圖片的下標(biāo)index是當(dāng)前展示圖片的下標(biāo) - 1。而為了實(shí)現(xiàn)無限循環(huán)并不超出數(shù)組的下標(biāo)范圍，則需要加上圖片的張數(shù)之后在%圖片的張數(shù)。

/**
 向左輕掃響應(yīng)方法
 */
- (void)circleSwipeImageToLeft {
UIImage *currentImage = self.middleImage.image;
NSInteger index = [self.imageArray indexOfObject:currentImage];
index = (index - 1 + self.imageArray.count) % self.imageArray.count;

[self changeAnimation:index toRight:NO];
}

最后是對(duì)middleImage.layer添加動(dòng)畫。

#pragma mark - 添加動(dòng)畫

/**
 為middleImage添加動(dòng)畫效果

 @param index  圖片數(shù)組下標(biāo)
 @param toRight 是否是向右滑動(dòng)
 */
- (void)changeAnimation:(NSInteger)index toRight:(BOOL)toRight {
CATransition *transition = [CATransition animation];
transition.type = kCATransitionReveal; //設(shè)置動(dòng)畫過渡的方式

if (toRight) {
  //向右滑動(dòng)，則圖片是由左向右運(yùn)動(dòng)
  transition.subtype = kCATransitionFromLeft;
}
else {
  //向左滑動(dòng)，則圖片是由右向左運(yùn)動(dòng)
  transition.subtype = kCATransitionFromRight;
}

//將動(dòng)畫添加middleIamge.layer上
[self.middleImage.layer addAnimation:transition forKey:nil];

NSInteger count = self.imageArray.count;

if (index >= 0 && index < count) {
  //更改middleImage展示的圖片
  self.middleImage.image = self.imageArray[index];
}
}

還有，圖片可以選中了之后直接拉到項(xiàng)目的Assets.xcassets里面

最終效果如下：

其實(shí)在這個(gè)項(xiàng)目中，leftImage和rightImage都沒有顯示圖片，可以去掉，為了展示有多張圖片的效果，可以在middleImage后面添加一個(gè)加了邊框的UIView。

而在這個(gè)項(xiàng)目中，有一個(gè)局限，就是transition.type 只能指定是kCATransitionReveal格式，其他的格式的過渡效果都比較差。可以使leftImage和rightImage展示圖片，然后將位置調(diào)整一下，并且修改transition.type看一下效果。下面是更改為kCATransitionPush的效果。