iOS实现带有缩放效果的自动轮播图
本文实例为大家分享了iOS带有缩放效果的自动轮播图，供大家参考，具体内容如下
可直接设置frame然后加载到视图上使用。
效果就是这样的，图片切换的过程中还是有卡顿，不够流畅，后续更新。
直接上代码。
.h文件包含：
#import <UIKit/UIKit.h> @interface CustomScrollView : UIView @property (strong,nonatomic) NSArray *imageArr; @end
.m文件包含:
#import "CustomScrollView.h"
@interface CustomScrollView ()<UIScrollViewDelegate>
@property (strong,nonatomic) UIScrollView *scrollView;
@property (strong,nonatomic) UIImageView *backImageView;
@property (strong,nonatomic) UIImageView *leftIamgeView;
@property (strong,nonatomic) UIImageView *middleImageView;
@property (strong,nonatomic) UIImageView *rightImageView;
@property (strong,nonatomic) UIPageControl *pageControl;
//高度
@property (assign,nonatomic) CGFloat scrollViewHeight;
//手动造成的偏移量
@property (assign,nonatomic) CGFloat offsetX;
@property (strong,nonatomic) NSTimer *timer;
//属于计时器方法动画持续时间 ？
@property (assign,nonatomic) BOOL timerAnimation;
@end
//左右内容的最大偏移量
#define OFFSET_MAX ([UIScreen mainScreen].bounds.size.width-64)*0.9
@implementation CustomScrollView
- (instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
self.scrollViewHeight = frame.size.height;
[self addSubview:self.backImageView];
[self addSubview:self.scrollView];
[self addSubview:self.pageControl];
[self.backImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.with.mas_equalTo(self);
}];
[self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.with.mas_equalTo(self);
}];
[self.pageControl mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.bottom.mas_equalTo(self);
make.height.mas_equalTo(@20);
}];
self.timer = [NSTimer scheduledTimerWithTimeInterval:5 target:self selector:@selector(timerAction) userInfo:nil repeats:YES];
[[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSDefaultRunLoopMode];
[self.timer setFireDate:[NSDate dateWithTimeIntervalSinceNow:5]];
}
return self;
}
- (NSArray *)imageArr {
if (!_imageArr) {
_imageArr = @[@"timg-0",@"timg-1",@"timg-2"];
}
return _imageArr;
}
- (UIImageView *)backImageView {
if (!_backImageView) {
_backImageView = [[UIImageView alloc] init];
_backImageView.image = [UIImage imageNamed:@"bg_home"];
}
return _backImageView;
}
- (UIScrollView *)scrollView {
if (!_scrollView) {
_scrollView = [[UIScrollView alloc] init];
_scrollView.showsVerticalScrollIndicator = NO;
_scrollView.showsHorizontalScrollIndicator = NO;
_scrollView.contentSize = CGSizeMake(kScreenWidth+2*OFFSET_MAX, self.scrollViewHeight);
[_scrollView setContentOffset:CGPointMake(OFFSET_MAX, 0)];
_scrollView.bounces = NO;
_scrollView.delegate = self;
_leftIamgeView = [[UIImageView alloc] init];
_leftIamgeView.image = [UIImage imageNamed:self.imageArr[0]];
_leftIamgeView.layer.cornerRadius = 5;
_leftIamgeView.layer.masksToBounds = YES;
_middleImageView = [[UIImageView alloc] init];
_middleImageView.image = [UIImage imageNamed:self.imageArr[1]];
_middleImageView.layer.cornerRadius = 5;
_middleImageView.layer.masksToBounds = YES;
_rightImageView = [[UIImageView alloc] init];
_rightImageView.image = [UIImage imageNamed:self.imageArr[2]];
_rightImageView.layer.cornerRadius = 5;
_rightImageView.layer.masksToBounds = YES;
[_scrollView addSubview:_leftIamgeView];
[_scrollView addSubview:_middleImageView];
[_scrollView addSubview:_rightImageView];
[_leftIamgeView mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake((kScreenWidth-64)*0.9, self.scrollViewHeight*0.9));
make.centerY.mas_equalTo(_scrollView);
make.right.mas_equalTo(_middleImageView.mas_left).offset(-20);
}];
[_middleImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(kScreenWidth-64, self.scrollViewHeight));
make.centerY.mas_equalTo(_scrollView);
make.left.mas_equalTo(_scrollView).offset(OFFSET_MAX+64/2);
}];
[_rightImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(_leftIamgeView);
make.centerY.mas_equalTo(_scrollView);
make.left.mas_equalTo(_middleImageView.mas_right).offset(20);
}];
}
return _scrollView;
}
- (UIPageControl *)pageControl {
if (!_pageControl) {
_pageControl = [[UIPageControl alloc] init];
_pageControl.numberOfPages = self.imageArr.count;
_pageControl.enabled = NO;
_pageControl.currentPage = 0;
_pageControl.hidesForSinglePage = YES;
_pageControl.pageIndicatorTintColor = [UIColor whiteColor];
_pageControl.currentPageIndicatorTintColor = MAINCOLOR;
}
return _pageControl;
}
#pragma mark ------------ UIScrollViewDelegate --------
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
if (self.timerAnimation) {
return;
}
CGFloat offScale = scrollView.contentOffset.x - OFFSET_MAX;
if (offScale < 0) {
//右滑
self.leftIamgeView.layer.transformScale = 1 + 1.0/9*(fabs(offScale)/OFFSET_MAX);
self.middleImageView.layer.transformScale = 1 - 0.1*(fabs(offScale)/OFFSET_MAX);
} else {
//左滑
self.rightImageView.layer.transformScale = 1 + 1.0/9*(fabs(offScale)/OFFSET_MAX);
self.middleImageView.layer.transformScale = 1 - 0.1*(fabs(offScale)/OFFSET_MAX);
}
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
CGPoint offset = scrollView.contentOffset;
self.offsetX = offset.x;
if ((fabs(self.offsetX-OFFSET_MAX) >= OFFSET_MAX*0.5)) {
if (!decelerate) {
//替换图片
[self exchangeImage];
}
} else {
//回弹复位
[scrollView setContentOffset:CGPointMake(OFFSET_MAX, 0) animated:YES];
self.leftIamgeView.layer.transform = CATransform3DIdentity;
self.middleImageView.layer.transform = CATransform3DIdentity;
self.rightImageView.layer.transform = CATransform3DIdentity;
}
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
//替换图片
[self exchangeImage];
}
#pragma mark ---------- exchangeImage ------
//替换图片
- (void)exchangeImage {
if (self.offsetX-OFFSET_MAX < 0) {
//右滑
UIImage *rightImage = self.rightImageView.image;
self.rightImageView.image = self.middleImageView.image;
self.middleImageView.image = self.leftIamgeView.image;
self.leftIamgeView.image = rightImage;
if (self.pageControl.currentPage - 1 < 0) {
self.pageControl.currentPage = self.pageControl.numberOfPages-1;
} else {
self.pageControl.currentPage -= 1;
}
} else {
//左滑
UIImage *leftImage = self.leftIamgeView.image;
self.leftIamgeView.image = self.middleImageView.image;
self.middleImageView.image = self.rightImageView.image;
self.rightImageView.image = leftImage;
if (self.pageControl.currentPage + 1 >= self.pageControl.numberOfPages) {
self.pageControl.currentPage = 0;
} else {
self.pageControl.currentPage += 1;
}
}
[self.scrollView setContentOffset:CGPointMake(OFFSET_MAX, 0)];
self.leftIamgeView.layer.transform = CATransform3DIdentity;
self.middleImageView.layer.transform = CATransform3DIdentity;
self.rightImageView.layer.transform = CATransform3DIdentity;
}
#pragma mark ---------- timer --------
- (void)timerAction {
self.offsetX = kScreenWidth+OFFSET_MAX-64;
self.timerAnimation = YES;
[UIView animateWithDuration:0.8 animations:^{
[self.scrollView setContentOffset:CGPointMake(self.offsetX, 0)];
self.rightImageView.layer.transformScale = 10/9.0;
self.middleImageView.layer.transformScale = 0.9;
} completion:^(BOOL finished) {
self.timerAnimation = NO;
[self exchangeImage];
self.rightImageView.layer.transform = CATransform3DIdentity;
self.middleImageView.layer.transform = CATransform3DIdentity;
}];
}
@end
最后调用：
self.scrollView = [[CustomScrollView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, 170)]; [self.view addSubview:self.scrollView];
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
您可能感兴趣的文章:
- IOS 开发之网络图片轮播图的实现
- iOS实现轮播图banner示例
相关推荐
-
IOS 开发之网络图片轮播图的实现
IOS 开发之网络图片轮播图的实现 截图 1.使用 LJPhotoGroupView *_ljPhotoGroupView = [[LJPhotoGroupView alloc]initWithItem:self.ljUrlArray]; _ljPhotoGroupView.backgroundColor = [UIColor blackColor]; _ljPhotoGroupView.frame = CGRectMake(0, 0, kDEVICEWIDTH, kDEVICEHEIGHT);
-
iOS实现轮播图banner示例
楼主项目中需要有一个轮播图,因为比较简单,就自己写了个,因为是从网上弄得图片 所以用了SDWebImage 这个三方库 当然自己也可以去掉 类型后面有*号 如用使用 请自行加上..... 代码:.h 文件 @protocol TJXViewDelegate<NSObject> //判断点击的那个 -(void)sendImageName:(TJXView *)TJXView andName:(NSInteger)selectImage; @end @interface TJXView : UI
-
iOS实现带有缩放效果的自动轮播图
本文实例为大家分享了iOS带有缩放效果的自动轮播图,供大家参考,具体内容如下 可直接设置frame然后加载到视图上使用. 效果就是这样的,图片切换的过程中还是有卡顿,不够流畅,后续更新. 直接上代码. .h文件包含: #import <UIKit/UIKit.h> @interface CustomScrollView : UIView @property (strong,nonatomic) NSArray *imageArr; @end .m文件包含: #import "Cust
-
jquery带有索引按钮且自动轮播切换特效代码分享
本文实例讲述了jquery带有索引按钮且自动轮播切换特效.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的带有索引按钮且自动轮播切换特效代码,实现过程很简单. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link rel="stylesheet" hr
-
swift实现自动轮播图效果（UIScrollView+UIPageControl+Timer）
本文实例为大家分享了swift实现自动轮播图效果的具体代码,供大家参考,具体内容如下 比较简单,原理就不说了,这里只做记录: 代码如下: 1.准备 var pageControl:UIPageControl? var myscrollView:UIScrollView? var myTimer:Timer? var mycurrentPage:NSInteger? var courses = [ ["name":"first","pic":&qu
-
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了,样式和逻辑均写在js里. 3.html标签代码,js代码 <div class="slider"> //轮播箭头 <p class="lastpic"><img src="../images/prev.png">&
-
android常见手动和自动轮播图效果
本文实例为大家分享了android手动和自动轮播图效果的具体代码,供大家参考,具体内容如下 1.准备好需要的轮播图片,图片标题(初始化,声明). /**轮播图片*/ private int[] imageIds=new int[]{ R.drawable.ic_launcher, R.drawable.simple_player_control_focused_holo, R.drawable.dot_player1_1, R.drawable.jt5, }; /**轮播图片的标题*/ priv
-
原生JS实现手动轮播图效果实例代码
手动轮播图,为轮播图中的一种,轮播图主要有无缝轮播,手动轮播,延迟轮播,切换轮播等等... 轮播图主要用于展现图片,新出商品,词条,又能美观网页.給网页中增加动态效果. 手动轮播,是小编认为最简单的一种轮播方式,既能左右翻页,还能通过悬浮按钮,快速预览图片,所以今天就给大家写一个原生js手动轮播图. 一,利用JavaScript制作手动轮播图,首先排版. 引入默认样式表(可以手写): <link rel="stylesheet" href="css/Default st
-
jquery实现简单自动轮播图效果
本文实例为大家分享了jquery实现简单自动轮播图的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="author" content="Jxz"> <title></title> <scri
-
原生JS实现的自动轮播图功能详解
本文实例讲述了原生JS实现的自动轮播图功能.分享给大家供大家参考,具体如下: 轮播图的用处 轮播图是现在网站网页上最常见的效果之一,很多网站上都会用到,淘宝京东等等.有些自动选项卡也是需要用到的,而且它的可重复性高.在这里分享一下,用js原生代码,实现轮播图的常见效果! 轮播图的原理 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过定时器实现自动播放. Html布局 首先父容器banner存放所有内容,子容器img-list存放图片.子容器list存放按钮小圆点.圆点我使
-
Android实现自动轮播图效果
本文实例为大家分享了Android实现轮播图效果展示的具体代码,供大家参考,具体内容如下 MainActivity.java public class MainActivity extends AppCompatActivity { private LinearLayout ll_dots; private TextView viewpager_tv; // 将ViewPager定义为全局变量,方便使用. private ViewPager viewpager_vp; // 建立一个ArrayL
-
js实现轮播图效果 z-index实现轮播图
本文实例为大家分享了js实现轮播图效果的具体代码,供大家参考,具体内容如下 实现轮播图 学习前端差不多两三个月,在这里记录分享一下.因本人菜鸟一枚,希望大佬们多多指点,勿喷. 通过计算每一张图片高度实现滑动轮播图 HTML代码: <div class="fate"> <div class="lancer"> <ul class="saber"> <li><img src="img/i