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

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

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

下面直接贴代码：

上面图形的动画

1. -(void) loadingAnimation:(float)fromValue toValue:(float)toValue timingFunction:(NSString * const)tf
2. {
3. //位置
4. CABasicAnimation *panimation = [CABasicAnimation animation];
5. panimation.keyPath = @"position.y";
6. panimation.fromValue =@(fromValue);
7. panimation.toValue = @(toValue);
8. panimation.duration = ANIMATION_DURATION_SECS;
9. panimation.timingFunction = [CAMediaTimingFunction functionWithName:tf];
10. //旋转
11. CABasicAnimation *ranimation = [CABasicAnimation animation];
12. ranimation.keyPath = @"transform.rotation";
13. ranimation.fromValue =@(0);
14. ranimation.toValue = @(M_PI_2);
15. ranimation.duration = ANIMATION_DURATION_SECS;
16. ranimation.timingFunction = [CAMediaTimingFunction functionWithName:tf];
17. //组合
18. CAAnimationGroup *group = [[CAAnimationGroup alloc] init];
19. group.animations = @[ panimation,ranimation];
20. group.duration = ANIMATION_DURATION_SECS;
21. group.beginTime = 0;
22. group.fillMode=kCAFillModeForwards;
23. group.removedOnCompletion = NO;
24. [_shapView.layer addAnimation:group forKey:@"basic"];
25. }

下面是阴影动画

1. -(void) scaleAnimation:(float) fromeValue toValue:(float)toValue timingFunction:(NSString * const)tf
2. {
3. //缩放
4. CABasicAnimation *sanimation = [CABasicAnimation animation];
5. sanimation.keyPath = @"transform.scale";
6. sanimation.fromValue =@(fromeValue);
7. sanimation.toValue = @(toValue);
8. sanimation.duration = ANIMATION_DURATION_SECS;
9. sanimation.fillMode = kCAFillModeForwards;
10. sanimation.timingFunction = [CAMediaTimingFunction functionWithName:tf];
11. sanimation.removedOnCompletion = NO;
12. [_shadowView.layer addAnimation:sanimation forKey:@"shadow"];
13. }

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

1. -(void)animateNextStep
2. {
3. switch (_stepNumber)
4. {
5. case 0:
6. {
7. _shapView.image=[UIImage imageNamed:@"loading_circle"];
8. [self loadingAnimation:_fromValue toValue:_toValue timingFunction:kCAMediaTimingFunctionEaseIn];
9. [self scaleAnimation:_scalefromValue toValue:_scaletoValue timingFunction:kCAMediaTimingFunctionEaseIn];
10. }
11. break;
12. case 1:
13. {
14. _shapView.image=[UIImage imageNamed:@"loading_square"];
15. [self loadingAnimation:_toValue toValue:_fromValue timingFunction:kCAMediaTimingFunctionEaseOut];
16. [self scaleAnimation:_scaletoValue toValue:_scalefromValue timingFunction:kCAMediaTimingFunctionEaseIn];
17. }
18. break;
19. case 2:
20. {
21. _shapView.image=[UIImage imageNamed:@"loading_square"];
22. [self loadingAnimation:_fromValue toValue:_toValue timingFunction:kCAMediaTimingFunctionEaseIn];
23. [self scaleAnimation:_scalefromValue toValue:_scaletoValue timingFunction:kCAMediaTimingFunctionEaseIn];
24. }
25. break;
26. case 3:
27. {
28. _shapView.image=[UIImage imageNamed:@"loading_triangle"];
29. [self loadingAnimation:_toValue toValue:_fromValue timingFunction:kCAMediaTimingFunctionEaseOut];
30. [self scaleAnimation:_scaletoValue toValue:_scalefromValue timingFunction:kCAMediaTimingFunctionEaseIn];
31. }
32. break;
33. case 4:
34. {
35. _shapView.image=[UIImage imageNamed:@"loading_triangle"];
36. [self loadingAnimation:_fromValue toValue:_toValue timingFunction:kCAMediaTimingFunctionEaseIn];
37. [self scaleAnimation:_scalefromValue toValue:_scaletoValue timingFunction:kCAMediaTimingFunctionEaseIn];
38. }
39. break;
40. case 5:
41. {
42. _shapView.image=[UIImage imageNamed:@"loading_circle"];
43. [self loadingAnimation:_toValue toValue:_fromValue timingFunction:kCAMediaTimingFunctionEaseOut];
44. [self scaleAnimation:_scaletoValue toValue:_scalefromValue timingFunction:kCAMediaTimingFunctionEaseIn];
45. _stepNumber = -1;
46. }
47. break;
48. default:
49. break;
50. }
51. _stepNumber++;
52. }

就这么简单，效果如下：

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

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