前言
这几天一直跟开源的抖音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/