欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

IOS等待时动画效果的实现

程序员文章站 2022-06-23 14:26:38
查询时间或长或短,为了提升用户体验,目前用的比较多的手段之一就是查询等待时添加一个动态等待效果。当我们在请求网络时加载页面时有个动作效果,效果图如下: 源代码可以网上...

查询时间或长或短,为了提升用户体验,目前用的比较多的手段之一就是查询等待时添加一个动态等待效果。当我们在请求网络时加载页面时有个动作效果,效果图如下:

IOS等待时动画效果的实现

源代码可以网上找开源项目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等待时动画效果的实现,希望对大家有所帮助。