ios loading视图动画(模仿58同城)

来源:互联网 发布:美国聊天软件排名 编辑:程序博客网 时间:2024/03/29 21:12

最近看了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


0 0