最近看了58同城的載入檢視，感覺很不錯，如下圖：

所以想模仿寫一個，下載58同城的app，解壓，發現它用的是圖片來實現的動畫效果，並不是繪製出來的，所以這就相對簡單些了，其實整個動畫的邏輯不復雜，無非是幾個動畫的組合，然後切換圖片，注意細節處，比如下面的陰影部分也是個動畫，上面的圖形下來，陰影變大，上去，陰影變小；

下面直接貼程式碼：

上面圖形的動畫

-(void) loadingAnimation:(float)fromValue toValue:(float)toValue timingFunction:(NSString * const)tf
{


    //位置
    CABasicAnimation *panimation = [CABasicAnimation animation];
    panimation.keyPath = @"position.y";
    panimation.fromValue 
 
[email protected](fromValue);
    panimation.toValue = @(toValue);
    panimation.duration = ANIMATION_DURATION_SECS;
    
    panimation.timingFunction = [CAMediaTimingFunction functionWithName:tf];
    
    
    //旋轉
    CABasicAnimation *ranimation = [CABasicAnimation animation];
    ranimation.keyPath = @"transform.rotation";
    ranimation.fromValue 
 
[email protected](0);
    ranimation.toValue = @(M_PI_2);
    ranimation.duration = ANIMATION_DURATION_SECS;
    
    ranimation.timingFunction = [CAMediaTimingFunction functionWithName:tf];
    


    //組合
    CAAnimationGroup *group = [[CAAnimationGroup alloc] init];
    group.animations = @[ panimation,ranimation];
    group.duration = ANIMATION_DURATION_SECS;
    group.beginTime = 0;
    group.fillMode=kCAFillModeForwards;
    group.removedOnCompletion = NO;


    [_shapView.layer addAnimation:group forKey:@"basic"];
    
   



}
 

下面是陰影動畫

-(void) scaleAnimation:(float) fromeValue toValue:(float)toValue timingFunction:(NSString * const)tf
{

    //縮放
    CABasicAnimation *sanimation = [CABasicAnimation animation];
    sanimation.keyPath = @"transform.scale";
    sanimation.fromValue [email protected](fromeValue);
    sanimation.toValue = @(toValue);
    sanimation.duration = ANIMATION_DURATION_SECS;
    
    sanimation.fillMode = kCAFillModeForwards;
    sanimation.timingFunction = [CAMediaTimingFunction functionWithName:tf];
    sanimation.removedOnCompletion = NO;
    
    [_shadowView.layer addAnimation:sanimation forKey:@"shadow"];
    

}

-(void)animateNextStep
{
    switch (_stepNumber)
    {
        case 0:
        {
            
            
            _shapView.image=[UIImage imageNamed:@"loading_circle"];
            
            
            [self loadingAnimation:_fromValue toValue:_toValue timingFunction:kCAMediaTimingFunctionEaseIn];
            
            [self scaleAnimation:_scalefromValue toValue:_scaletoValue timingFunction:kCAMediaTimingFunctionEaseIn];
            
            
        }
            break;
        case 1:
        {
            
            
            _shapView.image=[UIImage imageNamed:@"loading_square"];
            
            [self loadingAnimation:_toValue toValue:_fromValue timingFunction:kCAMediaTimingFunctionEaseOut];

            [self scaleAnimation:_scaletoValue toValue:_scalefromValue timingFunction:kCAMediaTimingFunctionEaseIn];

        }
            break;
        case 2:
        {
        
        
            
            _shapView.image=[UIImage imageNamed:@"loading_square"];

            [self loadingAnimation:_fromValue toValue:_toValue timingFunction:kCAMediaTimingFunctionEaseIn];

            [self scaleAnimation:_scalefromValue toValue:_scaletoValue timingFunction:kCAMediaTimingFunctionEaseIn];


        }
            break;
            
        case 3:
        {

            _shapView.image=[UIImage imageNamed:@"loading_triangle"];

        
            [self loadingAnimation:_toValue toValue:_fromValue timingFunction:kCAMediaTimingFunctionEaseOut];

            [self scaleAnimation:_scaletoValue toValue:_scalefromValue timingFunction:kCAMediaTimingFunctionEaseIn];

            

        }
            
            break;
            
        case 4:
        {
            
            _shapView.image=[UIImage imageNamed:@"loading_triangle"];
            
            [self loadingAnimation:_fromValue toValue:_toValue timingFunction:kCAMediaTimingFunctionEaseIn];

            
            [self scaleAnimation:_scalefromValue toValue:_scaletoValue timingFunction:kCAMediaTimingFunctionEaseIn];

        }
            
            break;
        case 5:
        {
            
            _shapView.image=[UIImage imageNamed:@"loading_circle"];
            
            [self loadingAnimation:_toValue toValue:_fromValue timingFunction:kCAMediaTimingFunctionEaseOut];
            
            [self scaleAnimation:_scaletoValue toValue:_scalefromValue timingFunction:kCAMediaTimingFunctionEaseIn];

            
            _stepNumber = -1;
            
        }
            
            break;

        default:
            break;
    }
    
    _stepNumber++;
}

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

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