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
- ios loading视图动画(模仿58同城)
- Android仿58同城Loading View
- Android仿58同城Loading View
- 58同城加载动画
- 逐帧动画做loading视图
- ios视图缩放动画
- ios视图缩放动画
- iOS视图动画效果
- iOS视图切换动画
- iOS 视图抖动动画
- 仿58同城加载动画
- 仿58同城加载动画
- 58同城引导页动画
- iOS 模仿系统的抖动动画
- [iOS]过渡动画之高级模仿 airbnb
- 58同城加载动画的实现( Android属性动画)
- IOS仿最新版爱奇异loading动画
- iOS Swift 简单实现Loading动画
- PHP内核探索笔记-函数
- HDOJ--2013
- 《iOS Human Interface Guidelines》——3D Touch
- 蓝桥杯 特殊回文数
- 关于Python升级版本出现的问题
- ios loading视图动画(模仿58同城)
- iOS正则表达式
- 查询Mysql未使用的索引
- Unbutn上搭建android开发环境的简短总结
- Android,iOS,浏览器打开手机QQ与指定用户聊天界面
- iOS_带文字的UISwitch
- Dubbo原理解析
- bzoj1050(最小生成树 并查集)
- 系统属性