ios loading视图动画（模仿58同城）

最近看了58同城的加载视图，感觉很不错，如下图：


所以想模仿写一个，下载58同城的app，解压，发现它用的是图片来实现的动画效果， 并不是绘制出来的，所以这就相对简单些了，其实整个动画的逻辑不复杂，无非是几个动画的组合，然后切换图片，注意细节处，比如下面的阴影部分也是个动画， 上面的图形下来，阴影变大，上去，阴影变小；

下面直接贴代码：

上面图形的动画

[objc] view plain copy
在CODE上查看代码片派生到我的代码片
  1. -(void) loadingAnimation:(float)fromValue toValue:(float)toValue timingFunction:(NSString * const)tf  
  2. {  
  3.   
  4.   
  5.     //位置  
  6.     CABasicAnimation *panimation = [CABasicAnimation animation];  
  7.     panimation.keyPath = @"position.y";  
  8.     panimation.fromValue =@(fromValue);  
  9.     panimation.toValue = @(toValue);  
  10.     panimation.duration = ANIMATION_DURATION_SECS;  
  11.       
  12.     panimation.timingFunction = [CAMediaTimingFunction functionWithName:tf];  
  13.       
  14.       
  15.     //旋转  
  16.     CABasicAnimation *ranimation = [CABasicAnimation animation];  
  17.     ranimation.keyPath = @"transform.rotation";  
  18.     ranimation.fromValue =@(0);  
  19.     ranimation.toValue = @(M_PI_2);  
  20.     ranimation.duration = ANIMATION_DURATION_SECS;  
  21.       
  22.     ranimation.timingFunction = [CAMediaTimingFunction functionWithName:tf];  
  23.       
  24.   
  25.   
  26.     //组合  
  27.     CAAnimationGroup *group = [[CAAnimationGroup alloc] init];  
  28.     group.animations = @[ panimation,ranimation];  
  29.     group.duration = ANIMATION_DURATION_SECS;  
  30.     group.beginTime = 0;  
  31.     group.fillMode=kCAFillModeForwards;  
  32.     group.removedOnCompletion = NO;  
  33.   
  34.   
  35.     [_shapView.layer addAnimation:group forKey:@"basic"];  
  36.       
  37.      
  38.   
  39.   
  40.   
  41. }  

下面是阴影动画

[objc] view plain copy
在CODE上查看代码片派生到我的代码片
  1. -(void) scaleAnimation:(float) fromeValue toValue:(float)toValue timingFunction:(NSString * const)tf  
  2. {  
  3.   
  4.     //缩放  
  5.     CABasicAnimation *sanimation = [CABasicAnimation animation];  
  6.     sanimation.keyPath = @"transform.scale";  
  7.     sanimation.fromValue =@(fromeValue);  
  8.     sanimation.toValue = @(toValue);  
  9.     sanimation.duration = ANIMATION_DURATION_SECS;  
  10.       
  11.     sanimation.fillMode = kCAFillModeForwards;  
  12.     sanimation.timingFunction = [CAMediaTimingFunction functionWithName:tf];  
  13.     sanimation.removedOnCompletion = NO;  
  14.       
  15.     [_shadowView.layer addAnimation:sanimation forKey:@"shadow"];  
  16.       
  17.   
  18. }  

然后我是开了个定时器去刷新动画，当然也有其他方法

[objc] view plain copy
在CODE上查看代码片派生到我的代码片
  1. -(void)animateNextStep  
  2. {  
  3.     switch (_stepNumber)  
  4.     {  
  5.         case 0:  
  6.         {  
  7.               
  8.               
  9.             _shapView.image=[UIImage imageNamed:@"loading_circle"];  
  10.               
  11.               
  12.             [self loadingAnimation:_fromValue toValue:_toValue timingFunction:kCAMediaTimingFunctionEaseIn];  
  13.               
  14.             [self scaleAnimation:_scalefromValue toValue:_scaletoValue timingFunction:kCAMediaTimingFunctionEaseIn];  
  15.               
  16.               
  17.         }  
  18.             break;  
  19.         case 1:  
  20.         {  
  21.               
  22.               
  23.             _shapView.image=[UIImage imageNamed:@"loading_square"];  
  24.               
  25.             [self loadingAnimation:_toValue toValue:_fromValue timingFunction:kCAMediaTimingFunctionEaseOut];  
  26.   
  27.             [self scaleAnimation:_scaletoValue toValue:_scalefromValue timingFunction:kCAMediaTimingFunctionEaseIn];  
  28.   
  29.         }  
  30.             break;  
  31.         case 2:  
  32.         {  
  33.           
  34.           
  35.               
  36.             _shapView.image=[UIImage imageNamed:@"loading_square"];  
  37.   
  38.             [self loadingAnimation:_fromValue toValue:_toValue timingFunction:kCAMediaTimingFunctionEaseIn];  
  39.   
  40.             [self scaleAnimation:_scalefromValue toValue:_scaletoValue timingFunction:kCAMediaTimingFunctionEaseIn];  
  41.   
  42.   
  43.         }  
  44.             break;  
  45.               
  46.         case 3:  
  47.         {  
  48.   
  49.             _shapView.image=[UIImage imageNamed:@"loading_triangle"];  
  50.   
  51.           
  52.             [self loadingAnimation:_toValue toValue:_fromValue timingFunction:kCAMediaTimingFunctionEaseOut];  
  53.   
  54.             [self scaleAnimation:_scaletoValue toValue:_scalefromValue timingFunction:kCAMediaTimingFunctionEaseIn];  
  55.   
  56.               
  57.   
  58.         }  
  59.               
  60.             break;  
  61.               
  62.         case 4:  
  63.         {  
  64.               
  65.             _shapView.image=[UIImage imageNamed:@"loading_triangle"];  
  66.               
  67.             [self loadingAnimation:_fromValue toValue:_toValue timingFunction:kCAMediaTimingFunctionEaseIn];  
  68.   
  69.               
  70.             [self scaleAnimation:_scalefromValue toValue:_scaletoValue timingFunction:kCAMediaTimingFunctionEaseIn];  
  71.   
  72.         }  
  73.               
  74.             break;  
  75.         case 5:  
  76.         {  
  77.               
  78.             _shapView.image=[UIImage imageNamed:@"loading_circle"];  
  79.               
  80.             [self loadingAnimation:_toValue toValue:_fromValue timingFunction:kCAMediaTimingFunctionEaseOut];  
  81.               
  82.             [self scaleAnimation:_scaletoValue toValue:_scalefromValue timingFunction:kCAMediaTimingFunctionEaseIn];  
  83.   
  84.               
  85.             _stepNumber = -1;  
  86.               
  87.         }  
  88.               
  89.             break;  
  90.   
  91.         default:  
  92.             break;  
  93.     }  
  94.       
  95.     _stepNumber++;  
  96. }  

就这么简单，效果如下：





~~~~~~~~~~~~~~~~~~~~~~~

工程下载地址：http://code4app.com/ios/%E6%A8%A1%E4%BB%BF58%E5%90%8C%E5%9F%8Eloading%E8%A7%86%E5%9B%BE/56ac4bc8b5ad2e9d7d8b4b9a

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wanghuaijun/p/5471472.html