这篇文章给大家分享的是有关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如何实现带有缩放效果的自动轮播图”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。