iOS 自定義載入等待動畫
一般來說，我們的專案中請求網路資料是一個比較耗時的操作，在請求的過程中如果給使用者只展示空白的頁面或者預設的頁面，難免顯得有些單調，這個時候我們可以新增一個指示動畫，開始請求的時候執行動畫，資料請求下來了停止動畫，這樣使用者體驗會好一些。下面開始自定義我們自己的載入指示動畫。
做好之後的效果圖如下
使用Xcode新建一個工程 ，我們選擇singleView，給工程取名字我這邊叫MYLoadingView。然後我們進入工程所在資料夾建立一個資料夾取名為MYAninationView，把 該資料夾拖進我們的工程，記住勾選 copyItemIfNeed。
完成之後是下面這個樣子，
在MYLoadingAnimation資料夾下建立自定義動畫檢視類，取名為MYLoadingAnimationView，繼承於UIView。
然後我們就可以在這個類裡面寫我們的動畫了。
在.h中新增一個初始化方法 、一個開始動畫的方法、一個停止動畫的方法。
這個 type是我們的動畫型別，我們可以根據型別建立不同的動畫效果，型別列舉 如下
這裡我們只寫一種作為示範，在.m裡面我們寫我們的動畫實現。原始碼如下，這裡只寫了一種效果，沒有進行型別判斷，我們也可以根據自己的興趣建立自己想要的動畫效果，這裡使用的是 關鍵幀動畫，
#import "MYLoadingAnimationView.h"
// 小球預設高度
static constCGFloat defauleSize = 40.0f;
@implementation
-(id)initWithSize:(CGFloat)size type:(MYLoadingAnimtaionType)animationType
{
if (self = [superinit]) {
_animationType = animationType;
_viewSize = size;
}
return self;
}
- (void)startAnimation
{
if (!self.layer.sublayers) {
[
}
self.layer.speed =1.0f;
_isAnimating = YES;
}
- (void)stopAnimation
{
self.layer.speed =0.0f;
_isAnimating = NO;
}
- (void)setupAnimationLayer
{
CALayer *layer = self.layer;
//子layer置空，載入新的
self.layer.sublayers =nil;
NSTimeInterval beginTime = CACurrentMediaTime();
CGFloat oX = (layer.bounds.size.width -_viewSize) / 2.0f;
CGFloat oY = (layer.bounds.size.height -_viewSize) / 2.0f;
for (int i =0; i < 2; i++) {
CALayer *circle = [CALayerlayer];
circle.frame = CGRectMake(oX, oY, defauleSize, defauleSize);
circle.anchorPoint = CGPointMake(0.5f, 0.5f);
circle.opacity = 0.5f;
circle.cornerRadius = defauleSize / 2.0f;
circle.transform = CATransform3DMakeScale(0.0f, 0.0f, 0.0f);
circle.backgroundColor = [UIColorredColor].CGColor;
//關鍵幀動畫
CAKeyframeAnimation *transformAnimation = [CAKeyframeAnimationanimationWithKeyPath:@"transform"];
transformAnimation.removedOnCompletion =NO;
transformAnimation.repeatCount = HUGE_VALF;
transformAnimation.duration = 2.0f;
transformAnimation.beginTime = beginTime - (1.0f * i);
transformAnimation.keyTimes = @[@(0.0f), @(0.5f), @(1.0f)];
transformAnimation.timingFunctions =@[[CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseInEaseOut],
[CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseInEaseOut],
[CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
transformAnimation.values =@[[NSValuevalueWithCATransform3D:CATransform3DMakeScale(0.0f,0.0f, 0.0f)],
[NSValuevalueWithCATransform3D:CATransform3DMakeScale(1.0f,1.0f, 0.0f)],
[NSValuevalueWithCATransform3D:CATransform3DMakeScale(0.0f,0.0f, 0.0f)]];
[layer addSublayer:circle];
[circle addAnimation:transformAnimationforKey:@"animation"];
}
}
#pragma -mark setter
- (void)setViewSize:(CGFloat)viewSize
{
if (_viewSize != viewSize) {
_viewSize = viewSize;
}
}
@end
自定義動畫類完成之後我們就可以在我們的檢視控制器中使用了，我們給試圖控制器新增兩個按鈕一個開始，一個停止，點選事件分別如下。
#import "ViewController.h"
#import "MYLoadingAnimationView.h"
@interface ViewController ()
{
MYLoadingAnimationView *_loadingView;
}
@end
@implementation ViewController
- (void)viewDidLoad {
[superviewDidLoad];
MYLoadingAnimationView *view = [[MYLoadingAnimationViewalloc]initWithSize:40.0ftype:MYLoadingAnimtaionTypeDoubleBall];
view.frame = CGRectMake(0,0, 80,80);
view.center = self.view.center;
[self.viewaddSubview:view];
_loadingView = view;
}
- (IBAction)start {
[_loadingViewstartAnimation];
}
- (IBAction)stop:(id)sender {
[_loadingViewstopAnimation];
}
- (void)didReceiveMemoryWarning {
[superdidReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
效果如下
我們可以進一步封裝，把建立不同動畫的過程封裝起來，我們的動畫View 初始化的時候 根據不同的 型別呼叫不同的動畫，就能夠實現多種型別了。