iOS仿抖音视频加载动画效果的实现方法

前言

这几天一直跟开源的抖音demo斗智斗勇,今天跟大家分享的是抖音中或者快手中加载视频的动画，这个加载效果还是挺实用，下面话不多说了，来随着小编一起学习学习吧

上图看成品

实现原理

首先我创建一个视图

@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的宽度 的视图

紧接着动画实现的代码

- (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行代码

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 （本地下载）

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。