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获取当前设备WiFi信息的方法

    iOS获取当前设备WiFi信息的方法

    很多公司现在都在做免费WIFI,车站、公交、地铁、餐厅,只要是人员密集流动的地方就有WIFI,免费WIFI从最初的网页认证方式也逐渐向客户端认证方式偏移。本文主要介绍iOS获取当前设备WiFi信息的方法,有需要的可以参考借鉴。
    2016-09-09
  • iOS实现底部弹出PopupWindow效果 iOS改变背景透明效果

    iOS实现底部弹出PopupWindow效果 iOS改变背景透明效果

    这篇文章主要为大家详细介绍了iOS实现底部弹出PopupWindow效果,iOS改变背景透明效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • iOS10适配问题收集整理

    iOS10适配问题收集整理

    本文是小编给大家收集整理些有关iOS10适配问题的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • 详解iOS webview加载时序和缓存问题总结

    详解iOS webview加载时序和缓存问题总结

    本篇文章主要介绍了iOS webview加载时序和缓存问题总结 ,这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。
    2017-09-09
  • 浅谈iOS开发如何适配暗黑模式(Dark Mode)

    浅谈iOS开发如何适配暗黑模式(Dark Mode)

    这篇文章主要介绍了浅谈iOS开发如何适配暗黑模式(Dark Mode),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • iOS中多线程的入门使用教程(Swift)

    iOS中多线程的入门使用教程(Swift)

    这篇文章主要给大家介绍了关于iOS中多线程入门使用的相关资料,一个进程中可以开启多条线程,每条线程可以并行执行不同的任务,本文通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-11-11
  • iOS开发蓝牙技术应用增加无线连接功能

    iOS开发蓝牙技术应用增加无线连接功能

    这篇文章主要为大家介绍了iOS开发蓝牙技术应用增加无线连接功能示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • iOS多线程实现多图下载功能

    iOS多线程实现多图下载功能

    这篇文章主要为大家详细介绍了iOS多线程实现多图下载功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-03-03
  • iOS开发之用javascript调用oc方法而非url

    iOS开发之用javascript调用oc方法而非url

    本文说的是非拦截URL进行判断,然后调用oc方法这种调用手段,所以不用讨论说为什么不用url这种方法,具体看需求,有需要的可以参考。
    2016-07-07
  • IOS代码修改音量实例详解

    IOS代码修改音量实例详解

    这篇文章主要介绍了IOS代码修改音量实例详解的相关资料,需要的朋友可以参考下
    2017-05-05

最新评论