iOS 用Swipe手势和动画实现循环播放图片

   <p style="text-align:center"><img src="https://simg.open-open.com/show/d460160d5dba97b435aaec3a7da161a7.jpg"></p>    <h3>主要想法</h3>    <ul>     <li>添加3个ImageView展示图片，实现图片的无限循环。</li>     <li>使用Swipe手势识别用户向右或向左滑动图片。</li>     <li>使用CATransition给ImageView.layer添加动画，展示图片更换的效果。</li>    </ul>    <h3>实现</h3>    <p>在storyboard添加三个UIImageView，用来展示图片。而数组imageArray则用来保存图片对象。</p>    <pre>  <code class="language-objectivec">@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  </code></pre>    <p>在viewDidLoad方法中设置一些初始参数</p>    <pre>  <code class="language-objectivec">- (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]];  }  }  </code></pre>    <p>中间的UIImageView(middleImage)最开始展示的第一张图。</p>    <pre>  <code class="language-objectivec">- (void)initView {  self.middleImage.image = self.imageArray[0];    //在imageView中添加外框，比较容易区分三张图片的位置  [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;  }  </code></pre>    <p>接着在self.view上添加swipe手势，分别是向左和向右轻扫。swipe手势必须要指定direction轻扫方向，否则默认是向右轻扫。</p>    <pre>  <code class="language-objectivec">#pragma mark - 图片循环播放    - (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];  }  </code></pre>    <p>然后实现轻扫响应方法。</p>    <p>向右轻扫，middleImage显示下一张图片，则图片的下标index是当前展示图片的下标 + 1。而为了实现无限循环并不超出数组的下标范围，则需要%图片数据的张数。</p>    <pre>  <code class="language-objectivec">/**   向右轻扫响应方法   */  - (void)circleSwipeImageToRight {  UIImage *currentImage = self.middleImage.image;  NSInteger index = [self.imageArray indexOfObject:currentImage];  index = (index + 1) % self.imageArray.count;     [self changeAnimation:index toRight:YES];  }  </code></pre>    <p>向左轻扫，middleImage显示上一张图片，则图片的下标index是当前展示图片的下标 - 1。而为了实现无限循环并不超出数组的下标范围，则需要加上图片的张数之后在%图片的张数。</p>    <pre>  <code class="language-objectivec">/**   向左轻扫响应方法   */  - (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];  }  </code></pre>    <p>最后是对middleImage.layer添加动画。</p>    <pre>  <code class="language-objectivec">#pragma mark - 添加动画    /**   为middleImage添加动画效果     @param index   图片数组下标   @param toRight 是否是向右滑动   */  - (void)changeAnimation:(NSInteger)index toRight:(BOOL)toRight {  CATransition *transition = [CATransition animation];  transition.type = kCATransitionReveal;  //设置动画过渡的方式    if (toRight) {      //向右滑动，则图片是由左向右运动      transition.subtype = kCATransitionFromLeft;  }  else {      //向左滑动，则图片是由右向左运动      transition.subtype = kCATransitionFromRight;  }    //将动画添加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];  }  }  </code></pre>    <p>还有，图片可以选中了之后直接拉到项目的Assets.xcassets里面</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/4d49defe8719bdb034422121906d97d2.jpg"></p>    <p>assets.png</p>    <p>最终效果如下：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/d8505089335ed097e9fcb7b43f903574.gif"></p>    <p>ChangeImage.gif</p>    <p>其实在这个项目中，leftImage和rightImage都没有显示图片，可以去掉，为了展示有多张图片的效果，可以在middleImage后面添加一个加了边框的UIView。</p>    <p>而在这个项目中，有一个局限，就是transition.type 只能指定是kCATransitionReveal格式，其他的格式的过渡效果都比较差。可以使leftImage和rightImage展示图片，然后将位置调整一下，并且修改transition.type看一下效果。下面是更改为kCATransitionPush的效果。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/44ba39097694be0c10b3fae8bb329575.gif"></p>    <p> </p>    <p>来自：http://www.cnblogs.com/liseylee/p/6482802.html</p>    <p> </p>