iOS 用Swipe手势和动画实现循环播放图片
![](http://upload-images.jianshu.io/upload_images/1907756-dd970c3bd36a41f5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
主要想法
- 添加3个ImageView展示图片,实现图片的无限循环。
- 使用Swipe手势识别用户向右或向左滑动图片。
- 使用CATransition给ImageView.layer添加动画,展示图片更换的效果。
实现
在storyboard添加三个UIImageView,用来展示图片。而数组imageArray则用来保存图片对象。
@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方法中设置一些初始参数
- (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中添加外框,比较容易区分三张图片的位置 [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轻扫方向,否则默认是向右轻扫。
#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]; }
然后实现轻扫响应方法。
向右轻扫,middleImage显示下一张图片,则图片的下标index是当前展示图片的下标 + 1。而为了实现无限循环并不超出数组的下标范围,则需要%图片数据的张数。
/**向右轻扫响应方法*/ - (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显示上一张图片,则图片的下标index是当前展示图片的下标 - 1。而为了实现无限循环并不超出数组的下标范围,则需要加上图片的张数之后在%图片的张数。
/**向左轻扫响应方法*/ - (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]; }
最后是对middleImage.layer添加动画。
#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]; } }
还有,图片可以选中了之后直接拉到项目的Assets.xcassets里面
![](http://upload-images.jianshu.io/upload_images/1907756-1429a4a791cd0bb0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
最终效果如下:
![](http://upload-images.jianshu.io/upload_images/1907756-3507204b909bae4b.gif?imageMogr2/auto-orient/strip)
其实在这个项目中,leftImage和rightImage都没有显示图片,可以去掉,为了展示有多张图片的效果,可以在middleImage后面添加一个加了边框的UIView。
而在这个项目中,有一个局限,就是transition.type 只能指定是kCATransitionReveal格式,其他的格式的过渡效果都比较差。可以使leftImage和rightImage展示图片,然后将位置调整一下,并且修改transition.type看一下效果。下面是更改为kCATransitionPush的效果。
![](http://upload-images.jianshu.io/upload_images/1907756-c3e60ee6d5543bb7.gif?imageMogr2/auto-orient/strip)
转载于:https://www.cnblogs.com/liseylee/p/6482802.html
iOS 用Swipe手势和动画实现循环播放图片相关推荐
- gif循环播放_防止动画GIF循环播放
gif循环播放 We all know animated GIFs put the "fun" in "functional." I've recently w ...
- css3设置动画不循环播放,不一样的css3之Animation
transition通过事件来触发动画效果,所以它本身就存在很多局限性.如果我希望动画效果能够自动执行怎么办?这就需要 用到css3的另一个重要 的属性--animation ### 关键帧 说到an ...
- JS小练习:使用JavaScript实现点击‘上一张’,‘下一张’循环播放图片
代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><title> ...
- PPT制作技巧汇总之动画设置与播放(office 2007)
1.快速应用幻灯片切换动画 选择幻灯片 → [动画] → "切换到此幻灯片" → 右下角按钮 → 选择动画方案 → [声音] → 选择声音 → [速度] → 选择速度 → [全部应 ...
- Python OpenCV _1基本操作(画图,循环播放图像,鼠标事件,读取中文路径中的图片)
此系列源码在我的GitHub里:https://github.com/yeyujujishou19/Python-OpenCV 一,OpenCV的结构 A)根据功能和需求的不同,OpenCV中的函数接 ...
- 用javascript点击小圆点循环播放轮播图片
点击小圆点循环播放图片 <style>*{padding: 0;margin: 0;}.place{position: relative;width: 800px;height: 600p ...
- 播放实现Android实现图片循环播放
本篇文章是一篇关于播放实现的帖子 很多时候,我们需要展示在客户端展示图片,而且是动态显示,即不停地自行切换图片.下面我们来看一下具体的实现方法.首先,我们需要在XML... 很多时候,我们需要展示在客 ...
- iOS开发系列--无限循环的图片浏览器
概述 UIKit框架中有大量的控件供开发者使用,在iOS开发中不仅可以直接使用这些控件还可以在这些控件的基础上进行扩展打造自己的控件.在这个系列中如果每个控件都介绍一遍确实没有必要,所谓授人以鱼不如授 ...
- [iOS]调和 pop 手势导致 AVPlayer 播放卡顿
作者 NewPan 关注 2017.07.15 14:24* 字数 3110 阅读 749评论 8喜欢 17 声明:我为这个框架写了四篇文章: 第一篇:[iOS]UINavigationControl ...
最新文章
- bzoj 4771: 七彩树 树链的并+可持久化线段树
- 借鉴开源框架自研日志收集系统
- 报错:“-bash: git: 未找到命令”
- pytorch微调bert_小版BERT也能出奇迹:最火的预训练语言库探索小巧之路
- python命令窗口中怎么导入numpy_科学网—windows7下python3.6如何导入numpy,Astropy - 杨涛只的博文...
- pytorch自定义图片输入
- python数据库介绍_Python数据库:MYSQL讲解介绍
- linux勒索病毒如何恢复数据,勒索病毒和相应的解密工具
- 通信中的“交织”技术
- 怎么看自己电脑的IP地址
- 数学与计算机学院女生节标语,北师最新最全女生节标语
- java程序员修炼教学视频,快来看鸭~
- android 自动更换壁纸,安卓壁纸如何设置自动更换壁纸-手机天堂
- 技术分享1: jinkens构建Android工程,并上传到蒲公英平台
- [转]中国为什么培育不出自己的跨国公司(搜藏)
- consul知识梳理与环境搭建
- mysql 设置双1_2020-10-15:mysql的双1设置是什么?
- python做按键精灵脚本_Python 实现按键精灵的功能,超简单详细(MAC版)
- 在Win10|Win11中安装ArcGIS10.2时遇到缺少.NET Framework 3.5问题的解决办法
- dp和sp的区别 以及字体