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