前言
这几天一直跟开源的抖音demo斗智斗勇,今天跟大家分享的是抖音中或者快手中加载视频的动画，这个加载效果还是挺实用，下面话不多说了，来随着小编一起学习学习吧
上图看成品
实现原理
首先我创建一个视图
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
@interface viewcontroller ()@property (nonatomic, strong) uiview *playloadingview;@end@implementation viewcontroller- (void)viewdidload { [super viewdidload]; //init player status bar self.playloadingview = [[uiview alloc]init]; self.playloadingview.backgroundcolor = [uicolor whitecolor]; [self.playloadingview sethidden:yes]; [self.view addsubview:self.playloadingview]; //make constraintes [self.playloadingview mas_makeconstraints:^(masconstraintmaker *make) { make.center.equalto(self.view); make.width.mas_equalto(1.0f); //宽 1 dp make.height.mas_equalto(0.5f); //高 0.5 dp }]; [self startloadingplayanimation:yes]; //调用动画代码} |
这里我们可以看到 我们实际上创建的是一个 1pt宽度 0.5 pt的宽度 的视图
紧接着动画实现的代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
- (void)startloadingplayanimation:(bool)isstart { if (isstart) { self.playloadingview.backgroundcolor = [uicolor whitecolor]; self.playloadingview.hidden = no; [self.playloadingview.layer removeallanimations]; caanimationgroup *animationgroup = [[caanimationgroup alloc] init]; animationgroup.duration = 0.5; animationgroup.begintime = cacurrentmediatime() + 0.5; animationgroup.repeatcount = maxfloat; animationgroup.timingfunction = [camediatimingfunction functionwithname:kcamediatimingfunctioneaseineaseout]; cabasicanimation *scaleanimation = [cabasicanimation animation]; scaleanimation.keypath = @"transform.scale.x"; scaleanimation.fromvalue = @(1.0f); scaleanimation.tovalue = @(1.0f * screenwidth); cabasicanimation *alphaanimation = [cabasicanimation animation]; alphaanimation.keypath = @"opacity"; alphaanimation.fromvalue = @(1.0f); alphaanimation.tovalue = @(0.5f); [animationgroup setanimations:@[scaleanimation, alphaanimation]]; [self.playloadingview.layer addanimation:animationgroup forkey:nil]; } else { [self.playloadingview.layer removeallanimations]; self.playloadingview.hidden = yes; }} |
完事 就这几行代码 搞定
其实核心的只有4行代码
|
1
2
3
4
|
cabasicanimation *scaleanimation = [cabasicanimation animation];scaleanimation.keypath = @"transform.scale.x";scaleanimation.fromvalue = @(1.0f);scaleanimation.tovalue = @(1.0f * screenwidth); |
关键在scaleanimation.keypath = @"transform.scale.x"; 这里我们要沿着x做缩放
缩放的得值从 1~屏幕宽度, 当然值多大自己可以控制.
如果@"transform.scale.y" 则是沿着y轴缩放
当然 如果写成@"transform.scale" 那就x,y 一起缩放 大家可以试试.
总结
本篇的动画技巧是 缩放的 transform.scale.y 从一个点 做layer缩放 就会出现 加载效果.
最后附上demo
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对服务器之家的支持。
原文链接：https://www.sunyazhou.com/2018/11/14/20181114PlayLoadingAnimation/
