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

 更新时间:2018年11月15日 10:18:09   作者:東引甌越  
这篇文章主要给大家介绍了关于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 (本地下载

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

相关文章

  • iOS实现视频和图片的上传思路

    iOS实现视频和图片的上传思路

    这篇文章主要介绍了iOS实现视频和图片的上传思路,本文分步骤给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • iOS中的线程死锁实例详解

    iOS中的线程死锁实例详解

    这篇文章主要给大家介绍了关于iOS中线程死锁的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-09-09
  • IOS中计算缓存文件的大小判断实例详解

    IOS中计算缓存文件的大小判断实例详解

    这篇文章主要介绍了IOS中计算缓存文件的大小判断实例详解的相关资料,希望通过本能帮助到大家,需要的朋友可以参考下
    2017-09-09
  • iOS Lotusoot模块化工具应用的动态思路

    iOS Lotusoot模块化工具应用的动态思路

    项目的不断更迭,导致项目越来越大,越来越臃肿,为了让项目更加条理,需要对项目进行模块化处理,为了减少模块之间的耦合,于是就有了Lotusoot这个工具
    2022-08-08
  • iOS获取验证码倒计时效果

    iOS获取验证码倒计时效果

    这篇文章主要为大家详细介绍了iOS获取验证码倒计时效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • ios利用RunLoop原理实现去监控卡顿实例详解

    ios利用RunLoop原理实现去监控卡顿实例详解

    这篇文章主要为大家介绍了ios利用RunLoop原理实现去监控卡顿实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • iOS Label实现文字渐变色效果

    iOS Label实现文字渐变色效果

    文字渐变色可以使整体的效果更上一个档次,最近在开发中就遇到了这个需求,所以整理出来,下面这篇文章主要给大家介绍了关于iOS Label实现文字渐变色效果的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-05-05
  • iOS实现垂直滑动条效果

    iOS实现垂直滑动条效果

    这篇文章主要为大家详细介绍了iOS实现垂直滑动条效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Swift Self详解及简单实例代码

    Swift Self详解及简单实例代码

    这篇文章主要介绍了Swift Self详解及简单实例代码的相关资料,这里对self 进行了详细介绍并附实例代码,需要的朋友可以参考下
    2016-12-12
  • iOS自定义UIButton点击动画特效

    iOS自定义UIButton点击动画特效

    这篇文章主要为大家详细介绍了iOS自定义UIButton点击动画特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-04-04

最新评论