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

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

赞 (0)

相关推荐

  • Android仿ios加载loading菊花图效果

    项目中经常会用到加载数据的loading显示图,除了设计根据app自身设计的动画loading,一般用的比较多的是仿照ios 的菊花加载loading 图,当然一些条件下还会涉及到加载成功/ 失败情况的显示,还有显示文字.   使用ProgressBar 来加载动画转圈,这里使用drawable文件 定义转圈动画, indeterminateDrawable 属性进行加载. <?xml version="1.0" encoding="utf-8"?> &

  • IOS实现视频动画效果的启动图

    IOS实现视频动画效果的启动图

    先上效果图 实现思路 主要思路就是用一个控制器来作为播放视频的载体,然后在让这个控制器作为根视图,视频播放完成之后那就该干嘛干嘛了. 话不多说了,下面就放代码好了 先新建一个控制器AnimationViewController在控制器中新建一个属性moviePlayer,记得要先引入系统库<MediaPlayer/MediaPlayer.h> @property (nonatomic, strong) MPMoviePlayerController *moviePlayer; 设置movieP

  • iOS 实现简单的加载等待动画示例（思路与实现）

    iOS 实现简单的加载等待动画示例（思路与实现）

    先看下最后基本要实现的效果 总结一下自己的实现思路与所用到的类 1.这个肯定是要自定义的View类,起名为XDColorCircle吧,最后用的时候达到这样的效果 //创建XDColorCircle的实例化对象 XDColorCircle *circle=[[XDColorCircle alloc]initWithFrame:CGRectMake(0 ,100,self.view.frame.size.width,200)]; //添加到视图上展示 [self.view addSubview:c

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

    关于iOS如何实现视频和图片的上传, 我们先理清下思路,然后小编根据思路一步一步给大家详解实现过程. 思路: #1. 如何获取图片? #2. 如何获取视频? #3. 如何把图片存到缓存路径中? #4. 如何把视频存到缓存路径中? #5. 如何上传? 接下来, 我们按照上面的思路一步一步实现 首先我们新建一个类, 用来储存每一个要上传的文件uploadModel.h #import <Foundation/Foundation.h> @interface uploadModel : NSObje

  • iOS中视频播放器的简单封装详解

    iOS中视频播放器的简单封装详解

    前言 如果仅仅是播放视频两者的使用都非常简单,但是相比MediaPlayer,AVPlayer对于视频播放的可控制性更强一些,可以通过自定义的一些控件来实现视频的播放暂停等等.因此这里使用AVPlayer的视频播放. 视频播放器布局 首先使用xib创建CLAVPlayerView继承UIView用来承载播放器,这样我们在外部使用的时候,直接在控制器View或者Cell上添加CLAVPlayerView即可,至于播放器播放或者暂停等操作交给CLAVPlayerView来管理.下面来看一下CLAVP

  • iOS性能优化教程之页面加载速率详解

    iOS性能优化教程之页面加载速率详解

    前言 我认为在编码过程中时刻注意性能影响是有必要的,但凡事都有个度,不能为了性能耽误了开发进度.在时间紧急的情况下我们往往采用"quick and dirty"的方案来快速出成果,后面再迭代优化,即所谓的敏捷开发.与之相对应的是传统软件开发中的瀑布流开发流程. 卡顿产生的原因 在 iOS 系统中,图像内容展示到屏幕的过程需要 CPU 和 GPU 共同参与.CPU 负责计算显示内容,比如视图的创建.布局计算.图片解码.文本绘制等.随后 CPU 会将计算好的内容提交到 GPU 去,由 GP

  • iOS点击文字按钮变转圈加载效果

    iOS点击文字按钮变转圈加载效果

    本文实例为大家分享了iOS点击文字按钮变转圈加载效果的相关代码,供大家参考,具体内容如下 实现效果: 实现代码: // 画弧线 - (void)drawHalfCircle { loadingLayer = [self drawCircle]; // 这个是用于指定画笔的开始与结束点 loadingLayer.strokeStart = 0.0; loadingLayer.strokeEnd = 0.75; } - (CAShapeLayer *)drawCircle { CGRect fram

  • iOS 进度条、加载、安装动画的简单实现

    iOS 进度条、加载、安装动画的简单实现

    首先看一下效果图: 下面贴上代码: 控制器ViewController: #import <UIKit/UIKit.h> @interface ViewController : UIViewController @end /*** ---------------分割线--------------- ***/ #import "ViewController.h" #import "HWWaveView.h" #import "HWCircleVi

  • 浅析iOS中视频播放的几种方案

    1.AVPlayer (1) 优缺点 优点:可以自定义 UI, 进行控制 缺点:单纯的播放,没有控制 UI(进度,暂停,播放等按钮),而且如果要显示播放界面, 需要借助AVPlayerLayer, 添加图层到需要展示的图层上 (2)实现远程视频播放 实现播放功能(只有声音) 1.导入框架 #import <AVFoundation/AVFoundation.h> 2.通过远程 URL 创建 AVPlayer 对象 NSURL *remoteURL = [NSURL URLWithString:

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

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

    前言 这几天一直跟开源的抖音demo斗智斗勇,今天跟大家分享的是抖音中或者快手中加载视频的动画,这个加载效果还是挺实用,下面话不多说了,来随着小编一起学习学习吧 上图看成品 实现原理 首先我创建一个视图 @interface ViewController () @property (nonatomic, strong) UIView *playLoadingView; @end @implementation ViewController - (void)viewDidLoad { [super

  • 微信小程序仿抖音视频之整屏上下切换功能的实现代码

    效果演示: WXML: <view class="video_box"> <view bindtouchend="touchEnd" id="myVideo{{index}}" animation="{{animation}}" bindtouchstart="touchStart" bindtouchmove="touchMove" class="video

  • iOS 仿微博客户端红包加载界面 XLDotLoading效果

    iOS 仿微博客户端红包加载界面 XLDotLoading效果

    一.显示效果 二.原理简介 1.思路 要实现这个效果需要先知道这两个硬币是怎样运动的,然后通过放大.缩小的效果实现的这种有距离感的效果.思路如下: 一.这两个硬币是在一定范围内做相对运动的,可以先使一个硬币在一个固定范围内做左右的往复运动,另一个硬币和它做"相对运动"即可. 二.让硬币从左至右移动时先变小再回复正常:从右至左移动时先变大再回复正常:这样就实现了这用有距离感的"相对运动". 2.代码 第一步 要实现一个硬币在一定范围内实现左右往复运动,需要先固定一个范

  • ios基于MJRefresh实现上拉刷新和下拉加载动画效果

    本文介绍了ios基于MJRefresh实现上拉刷新和下拉加载动画效果,分享给大家,具体如下: 目录 1. 头部刷新动画 2.尾部刷新动画 头部刷新动画 #import <MJRefresh/MJRefresh.h> @interface HZNormalHeader : MJRefreshGifHeader @end #import "HZNormalHeader.h" @implementation HZNormalHeader #pragma mark - 重写父类的方

  • Android仿网易一元夺宝客户端下拉加载动画效果(一)

    Android仿网易一元夺宝客户端下拉加载动画效果(一)

    上上周写的一个demo,仿照网易一元夺宝的下拉刷新效果. 原效果是(第一部分)一个小太阳拉下来,然后松开回弹上去, (第二部分)再掉下来一个硬币进行中轴旋转. 本文实现的效果的是第一部分的,效果演示图如下: Gif图看起来比较卡顿...其实真机演示效果还是很流畅的. 下面分析实现过程: 当时因为时间有限没有写在下拉刷新的组件中,也没有封装成一个单独的组件,只是在主布局后面写了一个View然后实现相应的操作,进行封装并不难,这里就不花时间BB了,下面是布局文件: <RelativeLayout x

  • Android仿支付宝笑脸刷新加载动画的实现代码

    Android仿支付宝笑脸刷新加载动画的实现代码

    看到支付宝的下拉刷新有一个笑脸的动画,因此自己也动手实现一下.效果图如下: 一.总体思路 1.静态部分的笑脸. 这一部分的笑脸就是一个半圆弧,加上两颗眼睛,这部分比较简单,用于一开始的展示. 2.动态笑脸的实现. 2.1.先是从底部有一个圆形在运动,运动在左眼位置时把左眼给绘制,同时圆形继续运动,运动到右眼位置时绘制右眼,圆形继续运动到最右边的位置. 2.2.当上面的圆形运动到最右边时候,开始不断绘制脸,从右向左,脸不断增长,这里脸设置为接近半个圆形的大小. 2.3.当脸画完的时候,开始让脸旋转

  • android仿爱奇艺加载动画实例

    android仿爱奇艺加载动画实例

    本篇文章介绍了android仿爱奇艺加载动画实例,具体代码如下: 效果图: 用到的知识点: Path ValueAnimator 如果对Path和ValueAnimator还不熟悉推荐去看这几个大神的Blog自定义view的目前讲的最适合我的文章 ,自定义view的详细教程和实践,这个也是教程和实践,感谢他们的付出!(希望大家可以认真看完,可以得到很多启发). 拆解动画 一个圆先顺时针的慢慢画出来(圆不是一个闭合的圆) 这一步是一个组合动画,圆慢慢的消失,同时三角形顺时针旋转 这里的难点主要就是

  • Android实现仿微软系统加载动画效果

    Android实现仿微软系统加载动画效果

    效果图: 实现步骤: 初始化五个圆球分别设置中心点,方便画圆 利用ValueAnimator的值变化来获取旋转角度 onDraw来分别画每个圆 具体代码实现: 1.创建Circle对象 package com.sjl.keeplive.track; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.PointF; public class Circle { private

  • vue使用Vue.extend方法仿写个loading加载中效果实例

    vue使用Vue.extend方法仿写个loading加载中效果实例

    目录 需求描述 效果图 代码实现 第一步,新建loading组件 第二步,新建index.js文件 第三步,在main.js中引入之 第四步,命令式调用 Vue.extend方法的理解 总结 需求描述 本文我们使用vue的extend方法实现一个全屏loading加载效果 通过命令就可以让弹框开启或关闭,比如this.$showDialog()开启,this.$hideDialog()关闭 方法可以传参更改loading中的文字 也可以传参更改loading背景色 当然这里除了文字,背景色什么的

  • jQuery生成假加载动画效果

    在使用PDFObject.js时,由于后台需要转换数据,在前台显示的时候,有很长一段时间显示空白页面,所以想到写一个假的加载动画 script片段: <script type="text/javascript"> var bar = 0; var line = "||" ; var amount ="||" ; function count(){ bar= bar+2 ; amount =amount + line; $("

随机推荐