IOS等待时动画效果的实现
程序员文章站
2022-06-23 14:26:38
查询时间或长或短,为了提升用户体验,目前用的比较多的手段之一就是查询等待时添加一个动态等待效果。当我们在请求网络时加载页面时有个动作效果,效果图如下:
源代码可以网上...
查询时间或长或短,为了提升用户体验,目前用的比较多的手段之一就是查询等待时添加一个动态等待效果。当我们在请求网络时加载页面时有个动作效果,效果图如下:
源代码可以网上找开源项目coding.net,上面的效果原理为两张图片组合,外面那个则为动画转动,里面的图标则是透明度的变化;主要代码如下:
1:把它封装在easeloadingview里面
@interface easeloadingview : uiview @property (strong, nonatomic) uiimageview *loopview, *monkeyview; @property (assign, nonatomic, readonly) bool isloading; - (void)startanimating; - (void)stopanimating; @end @interface easeloadingview () @property (nonatomic, assign) cgfloat loopangle, monkeyalpha, anglestep, alphastep; @end @implementation easeloadingview - (instancetype)initwithframe:(cgrect)frame{ self = [super initwithframe:frame]; if (self) { self.backgroundcolor = [uicolor clearcolor]; _loopview = [[uiimageview alloc] initwithimage:[uiimage imagenamed:@"loading_loop"]]; _monkeyview = [[uiimageview alloc] initwithimage:[uiimage imagenamed:@"loading_monkey"]]; [_loopview setcenter:self.center]; [_monkeyview setcenter:self.center]; [self addsubview:_loopview]; [self addsubview:_monkeyview]; [_loopview mas_makeconstraints:^(masconstraintmaker *make) { make.center.equalto(self); }]; [_monkeyview mas_makeconstraints:^(masconstraintmaker *make) { make.center.equalto(self); }]; _loopangle = 0.0; _monkeyalpha = 1.0; _anglestep = 360/3; _alphastep = 1.0/3.0; } return self; } - (void)startanimating{ self.hidden = no; if (_isloading) { return; } _isloading = yes; [self loadinganimation]; } - (void)stopanimating{ self.hidden = yes; _isloading = no; } - (void)loadinganimation{ static cgfloat duration = 0.25f; _loopangle += _anglestep; if (_monkeyalpha >= 1.0 || _monkeyalpha <= 0.0) { _alphastep = -_alphastep; } _monkeyalpha += _alphastep; [uiview animatewithduration:duration delay:0.0 options:uiviewanimationoptioncurvelinear animations:^{ cgaffinetransform loopangletransform = cgaffinetransformmakerotation(_loopangle * (m_pi / 180.0f)); _loopview.transform = loopangletransform; _monkeyview.alpha = _monkeyalpha; } completion:^(bool finished) { if (_isloading && [self superview] != nil) { [self loadinganimation]; }else{ [self removefromsuperview]; _loopangle = 0.0; _monkeyalpha = 1,0; _alphastep = abs(_alphastep); cgaffinetransform loopangletransform = cgaffinetransformmakerotation(_loopangle * (m_pi / 180.0f)); _loopview.transform = loopangletransform; _monkeyview.alpha = _monkeyalpha; } }]; } @end
注意loadinganimation这里面有动作的处理及透明度的处理,当停止加载后把它自个从当前的视图去除;
2:uiview (common)在uiview扩展类里
#pragma mark loadingview @property (strong, nonatomic) easeloadingview *loadingview; - (void)beginloading; - (void)endloading; @end - (void)setloadingview:(easeloadingview *)loadingview{ [self willchangevalueforkey:@"loadingviewkey"]; objc_setassociatedobject(self, &loadingviewkey, loadingview, objc_association_retain_nonatomic); [self didchangevalueforkey:@"loadingviewkey"]; } - (easeloadingview *)loadingview{ return objc_getassociatedobject(self, &loadingviewkey); } - (void)beginloading{ for (uiview *aview in [self.blankpagecontainer subviews]) { if ([aview iskindofclass:[easeblankpageview class]] && !aview.hidden) { return; } } if (!self.loadingview) { //初始化loadingview self.loadingview = [[easeloadingview alloc] initwithframe:self.bounds]; } [self addsubview:self.loadingview]; [self.loadingview mas_makeconstraints:^(masconstraintmaker *make) { make.self.edges.equalto(self); }]; [self.loadingview startanimating]; } - (void)endloading{ if (self.loadingview) { [self.loadingview stopanimating]; } }
注意:cocoa的kvo模型中,有两种通知观察者的方式,自动通知和手动通知。顾名思义,自动通知由cocoa在属性值变化时自动通知观察者,而手动通知需要在值变化时调用 willchangevalueforkey:和didchangevalueforkey: 方法通知调用者。
3:使用页面调用
- (void)sendrequest{ [self.view beginloading]; __weak typeof(self) weakself = self; [[coding_netapimanager sharedmanager] request_codefile:_mycodefile withpro:_myproject andblock:^(id data, nserror *error) { [weakself.view endloading]; if (data) { weakself.mycodefile = data; [weakself refreshcodeviewdata]; } [weakself.view configblankpage:easeblankpagetypeview hasdata:(data != nil) haserror:(error != nil) reloadbuttonblock:^(id sender) { [weakself sendrequest]; }]; }]; }
其中[self.view beginloading]跟[weakself.view endloading]就可以调用动画效果;
补充:另一种是有很多不同的图片组成的动画效果,可以用每一张图片然后for遍历组成出动作效果;
//设置普通状态的动画图片 nsmutablearray *idleimages = [nsmutablearray array]; for (nsuinteger i = 1; i<=60; ++i) { uiimage *image = [uiimage imagenamed:[nsstring stringwithformat:@"dropdown_anim__000%zd",i]]; [idleimages addobject:image]; [idleimages addobject:image]; }
以上内容是本文通过ios等待时动画效果的实现,希望对大家有所帮助。