当前位置: 移动技术网 > IT编程>移动开发>IOS > iOS实现带有缩放效果的自动轮播图

iOS实现带有缩放效果的自动轮播图

2019年07月24日  | 移动技术网IT编程  | 我要评论

动力环境监控,时代周刊中文版,宅急送的官网

本文实例为大家分享了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 uicollectionview实现横向滚动

    现在使用卡片效果的app很多,之前公司让实现一种卡片效果,就写了一篇关于实现卡片的文章。文章最后附有demo实现上我选择了使用uicollectionview ... [阅读全文]
  • iOS UICollectionView实现横向滑动

    本文实例为大家分享了ios uicollectionview实现横向滑动的具体代码,供大家参考,具体内容如下uicollectionview的横向滚动,目前我使... [阅读全文]
  • iOS13适配深色模式(Dark Mode)的实现

    iOS13适配深色模式(Dark Mode)的实现

    好像大概也许是一年前, mac os系统发布了深色模式外观, 看着挺刺激, 时至今日用着也还挺爽的终于, 随着iphone11等新手机的发售, ios 13系统... [阅读全文]
  • ios 使用xcode11 新建项目工程的步骤详解

    ios 使用xcode11 新建项目工程的步骤详解

    xcode11新建项目工程,新增了scenedelegate这个类,转而将原appdelegate负责的对ui生命周期的处理担子接了过来。故此可以理解为:ios... [阅读全文]
  • iOS实现转盘效果

    本文实例为大家分享了ios实现转盘效果的具体代码,供大家参考,具体内容如下demo下载地址: ios转盘效果功能:实现了常用的ios转盘效果,轮盘抽奖效果的实现... [阅读全文]
  • iOS开发实现转盘功能

    本文实例为大家分享了ios实现转盘功能的具体代码,供大家参考,具体内容如下今天给同学们讲解一下一个转盘选号的功能,直接上代码直接看viewcontroller#... [阅读全文]
  • iOS实现轮盘动态效果

    本文实例为大家分享了ios实现轮盘动态效果的具体代码,供大家参考,具体内容如下一个常用的绘图,主要用来打分之类的动画,效果如下。主要是ios的绘图和动画,本来想... [阅读全文]
  • iOS实现九宫格连线手势解锁

    本文实例为大家分享了ios实现九宫格连线手势解锁的具体代码,供大家参考,具体内容如下demo下载地址:效果图:核心代码://// clockview.m// 手... [阅读全文]
  • iOS实现卡片堆叠效果

    本文实例为大家分享了ios实现卡片堆叠效果的具体代码,供大家参考,具体内容如下如图,这就是最终效果。去年安卓5.0发布的时候,当我看到安卓全新的material... [阅读全文]
  • iOS利用余弦函数实现卡片浏览工具

    iOS利用余弦函数实现卡片浏览工具

    本文实例为大家分享了ios利用余弦函数实现卡片浏览工具的具体代码,供大家参考,具体内容如下一、实现效果通过拖拽屏幕实现卡片移动,左右两侧的卡片随着拖动变小,中间... [阅读全文]
验证码:
移动技术网