01.轮播图之五 :一个 imageView也能 作 轮播
这个是最近才写的,本以为实现起来很有难度,需要更高深的理论,
写完之后,才发现自己错误的离谱;
之所以能用一个imageview 实现轮播 基于两点:::
- 使用 imageview 的layer 层设置,也就是动用的是imageview的重新绘制---- 这个是视图切换的原因
- 使用 CATransition 动画 ------ 这个动画模拟了轮播的效果
就是简单:::
.h 的声明
@interface ImageViewShuffling : UIView
@property (nonatomic,strong)NSArray *array; @end
.m 实现,和理论解释
@interface ImageViewShuffling () @property (nonatomic,strong)UIImageView *imageView;
@property (nonatomic,assign)NSInteger currentIndex; @end @implementation ImageViewShuffling
@synthesize array = _array; -(instancetype)initWithFrame:(CGRect)frame{ if (self == [super initWithFrame:frame]) {
[self addSubview:self.imageView];
}
return self;
} -(void)setArray:(NSArray *)array{ NSAssert(array.count != , @"传入的滚动数组是 空的");
_array = array;
self.imageView.backgroundColor = array.firstObject;
} -(UIImageView *)imageView{ if (_imageView == nil) {
_imageView =[[UIImageView alloc]initWithFrame:CGRectMake(, , self.frame.size.width, self.frame.size.height)];
_imageView.contentMode = UIViewContentModeScaleAspectFit;
_imageView.userInteractionEnabled = YES;
/*
imageview 添加左右滑动的手势
*/
UISwipeGestureRecognizer *left = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(leftSwifAction:)];
left.direction = UISwipeGestureRecognizerDirectionLeft;
[_imageView addGestureRecognizer:left];
UISwipeGestureRecognizer *right = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(rigthSwifAction:)];
right.direction = UISwipeGestureRecognizerDirectionRight;
[_imageView addGestureRecognizer:right];
}
return _imageView;
}
/*
根据手势判断 左右的滑动 判断 显示的index
*/
-(void)rigthSwifAction:(UISwipeGestureRecognizer*)swip{ self.currentIndex = (self.currentIndex+) % (self.array.count);
[self changeImageWithIndex:self.currentIndex andDirection:@"right"];
}
-(void)leftSwifAction:(UISwipeGestureRecognizer*)swip{ self.currentIndex = (self.currentIndex - + self.array.count)%(self.array.count);
[self changeImageWithIndex:self.currentIndex andDirection:@"left"];
}
/*
这个是唯一的重点::
使用 CATransition 添加动画
*/
-(void)changeImageWithIndex:(NSInteger)integer andDirection:(NSString*)direction{ self.imageView.backgroundColor = self.array[integer]; CATransition *transition = [[CATransition alloc]init];
transition.type = kCATransitionPush; if ([direction isEqualToString:@"right"]) { transition.subtype = kCATransitionFromLeft;
}else{// if left transition.subtype = kCATransitionFromRight;
} [self.imageView.layer addAnimation:transition forKey:@"direction"];
}
有木有发现,这个实现很简单呀…………
主要是CATransition 动画的功劳…………
调用:::
-(void)prepareImageViewShuffling{ ImageViewShuffling *imageViewShuffling = [[ImageViewShuffling alloc]initWithFrame:CGRectMake(, , self.view.frame.size.width -, )];
[self.view addSubview:imageViewShuffling];;
imageViewShuffling.array = self.arr;
}
01.轮播图之五 :一个 imageView也能 作 轮播的更多相关文章
- 自己动手丰衣足食之轮播图一动态修改marginTop属性实现轮播图
引言 学习jQuery有年头了,刚开始学习时自己动手写过轮播图,放的久了以至于忘了大致思路了.现在转而做前端,抽空把jquery轮播图拿出来写一写,把各种思路都自己练习练习,这里主要使用动态修改mar ...
- swiper轮播问题之一:轮播图内容为动态数据生成时轮播图无法自动轮播
本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助. 首先,new Swiper的初始化最 ...
- 【云开发】10分钟零基础学会做一个快递查询微信小程序,快速掌握微信小程序开发技能(轮播图、API请求)
大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...
- android 轮播图
轮播图是很常用的一个效果 核心功能已经实现 没有什么特殊需求 自己没事研究的 所以封装的不太好 一些地方还比较糙 为想要研究轮播图的同学提供个参考 目前测试图片为mipmap中的图片 没有写从网络加载 ...
- Android轮播图
轮播图是很常用的一个效果 核心功能已经实现 没有什么特殊需求 自己没事研究的 所以封装的不太好 一些地方还比较糙 为想要研究轮播图的同学提供个参考目前测试图片为mipmap中的图片 没有写从网络加载图 ...
- Android轮播图Banner的实现
从慕课网上学了一门叫做“不一样的自定义实现轮播图效果”的课程,感觉实用性较强,而且循序渐进,很适合初学者.在此对该课程做一个小小的笔记. 实现轮播思路: 1.一般轮播图是由一组图片和底部轮播圆点组成, ...
- 使用jq深入研究轮播图特性
网站轮播图 太耳熟的词了 基本上做pc端的 主页绝壁会来一个轮播图的特效 轮播图他一个页面页面的切换,其实的原理是通过css的定位 ,定位到一起,第一张首先显示,其余默认隐藏. 今天我实现的这个轮播 ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- JQ万能轮播图
lunbotu.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
随机推荐
- ElementUI2.0组件库el-table表格组件如何自定义表头?
效果图: npm run dev 编译项目之后,报错,要使用jsx语法需要先安装编译插件 1.安装下列安装包 npm install babel-plugin-syntax-jsx --save-de ...
- leetcode解题报告(14):Max Consecutive Ones
描述 Given a binary array, find the maximum number of consecutive 1s in this array. Example 1: Input: ...
- 树套树【bzoj3262】陌上花开
/* [bzoj3262]陌上花开 2014年6月19日1,2430 Description 有n朵花,每朵花有三个属性:花形(s).颜色(c).气味(m),又三个整数表示.现要对每朵花评级,一朵花的 ...
- 1101: [POI2007]Zap(莫比乌斯反演)
1101: [POI2007]Zap Time Limit: 10 Sec Memory Limit: 162 MB Description FGD正在破解一段密码,他需要回答很多类似的问题:对于给定 ...
- redis缓存击穿问题一种思路分享
思路每一个key都有一个附属key1,附属key1可以是key加特定前缀组成,key对应value为真正的缓存数据,附属key1对应的value不重要,可以是随便一个值,附属key1的作用主要是维护缓 ...
- 时隔五年,Scrapyd 终于原生支持 basic auth
Issue in 2014 scrapy/scrapyd/issues/43 Pull request in 2019 scrapy/scrapyd/pull/326 试用 1. 安装: pip in ...
- 实现一个简单的Tomcat
实现一个简单的Tomcat 1. Tomcat作用 我们的web应用会运行在Tomcat中,那么显然请求必定是先到达Tomcat的,Tomcat对于请求实际上会进行如下的处理: 提供Socket服务: ...
- Python_BDD概念
BDD概念 全称 Behavior-driven development 中文 行为驱动开发 概念 是敏捷软件开发技术的一种,鼓励各方人员在一个软件项目里交流合作,包括开发人员.测试人员和非技术人员或 ...
- C++ STL介绍——String类
目录 1.简介 2.string类成员函数汇总 3.String类的构造函数以及析构函数 4.获取字符串长度 5.获取字符串元素 6.字符串比较方法 7.字符串输入输出 8.字符串查找函数 1.简介 ...
- viewbag
How does ViewBag in ASP.NET MVC work behind the scenes? https://stackoverflow.com/a/16950197/3782855 ...