ios loading視圖動畫（模仿58同城）

最近看了58同城的加載視圖，感受很不錯，以下圖：

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

下面直接貼代碼：

上面圖形的動畫

 

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


    //位置
    CABasicAnimation *panimation = [CABasicAnimation animation];
    panimation.keyPath = @"position.y";
    panimation.fromValue =@(fromValue);
    panimation.toValue = @(toValue);
    panimation.duration = ANIMATION_DURATION_SECS;

    panimation.timingFunction = [CAMediaTimingFunction functionWithName:tf];


    //旋轉
    CABasicAnimation *ranimation = [CABasicAnimation animation];
    ranimation.keyPath = @"transform.rotation";
    ranimation.fromValue =@(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 =@(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