ios loading视图动画（模仿58同城）

最新推荐文章于 2025-02-07 08:30:00 发布

wang_daren

最新推荐文章于 2025-02-07 08:30:00 发布

阅读量3.7k

点赞数

分类专栏： ios学习文章标签： ios 动画 58同城 loading 视图

本文链接：https://blog.csdn.net/kuloveyouwei/article/details/50319167

版权

ios学习专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何模仿58同城的加载视图动画。通过分析58同城APP，发现其动画效果是通过图片序列实现的，而不是动态绘制。文章详细讲述了动画逻辑，主要包括图形动画和阴影动画的组合，同时关注细节如阴影变化。提供了相关代码示例及工程下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

就这么简单，效果如下：