现在app都做的越来越炫酷，各种动画效果，各种特效很好的提高了用户的体验。很多app在登录界面都使用了动画效果，比如Uber，Keep，QQ等等。这些动画效果基本都是使用gif或者MP4来实现的。

效果图：

这里提供3种方式实现登录界面动画,有需要的同学可以参考一下

1.video篇，使用avplayer加载video来实现效果

实现步骤基本上是初始化播放器，然后加载video，有几个注意点：1.导入头文件#import <AVFoundation/AVFoundation.h> 2.app进入后台后，video播放就停止了，这里采用通知的方式在app从后台进入前台时通知控制开启播放video 代码如下：

- (void)setupForAVplayerView

{

    AVPlayerLayer *playerLayer = [AVPlayerLayer playerLayerWithPlayer:self.player];

    playerLayer.frame = self.view.bounds;

    [self.view.layer addSublayer:playerLayer];

}

/**

 *  初始化播放器

 */

- (AVPlayer *)player

{

    if (!_player) {

        AVPlayerItem *playerItem = [self getPlayItem];

        _player = [AVPlayer playerWithPlayerItem:playerItem];

        //设置重复播放

        _player.actionAtItemEnd = AVPlayerActionAtItemEndNone; // set this

        //视频播放完发通知

        [[NSNotificationCenter defaultCenter]addObserver:self

                                                selector:@selector(__playerItemDidPlayToEndTimeNotification:)

                                                    name:AVPlayerItemDidPlayToEndTimeNotification

                                                  object:nil];

    }

    return _player;

}

- (AVPlayerItem *)getPlayItem

{

    NSString *filePath = [[NSBundle mainBundle]pathForResource:@"BridgeLoop-640p" ofType:@"mp4"];

    NSURL *url = [NSURL fileURLWithPath:filePath];

    AVPlayerItem *playerItem = [AVPlayerItem playerItemWithURL:url];

    return playerItem;

}

- (void)__playerItemDidPlayToEndTimeNotification:(NSNotification *)sender

{

    [_player seekToTime:kCMTimeZero]; // 设置从头继续播放

}

//视频进入后台到前台视频暂停的处理方法

appDelegate.m中

- (void)applicationDidBecomeActive:(UIApplication *)application {

    [[NSNotificationCenter defaultCenter]postNotificationName:@"appBecomeActive" object:nil];

}

viewController.m

- (void)viewWillAppear:(BOOL)animated

{

    //视频播放

    [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(playVideos) name:@"appBecomeActive" object:nil];

}

2.gif篇 利用webView加载gif的方法来实现gif的播放

需要注意的是html中加载的gif路径不要搞错了，要不然gif无法加载出来 代码如下：

html:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

        <title>loadgif</title>

        <style type="text/css">

            *{

                margin:0px;

                padding:0px;

            }

        .loadGif {

            width: 100%;

            height: 100%;

            /*设置背景*/

            background: url(loadgif.gif) no-repeat center center;

            /*让背景全屏*/

            background-size: cover;

            /*让div全屏*/

            position:absolute;

        }

        </style>

    </head>

    <body>

        <div class="loadGif"> </div>

    </body>

</html>

oc中

-(void)setupWebView{

    UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds];

    [self.view addSubview:webView];

    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"loadGif.html" ofType:nil];

    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:filePath]];

    [webView loadRequest:request];

    webView.userInteractionEnabled = NO;

}

3.gif篇 这里仍然使用gif,如果你觉得使用html过于麻烦，自己对html又不是很熟悉，这里提供另外一种加载gif的方法，使用YYImge加载gif

需要注意的是YYImge需要添加一个静态库 libz.tbd 依赖 代码如下：

-(void)setupYYImageView{

   NSString *path = [[NSBundle mainBundle] pathForResource:@"loadgif.gif" ofType:nil];

    YYImage *image = [YYImage imageWithContentsOfFile:path];

    YYAnimatedImageView *imgView = [[YYAnimatedImageView alloc] initWithFrame:self.view.bounds];

    imgView.contentMode = UIViewContentModeScaleAspectFill;

    imgView.image = image;

    [self.view addSubview:imgView];

}

demo下载地址 ：https://github.com/qqcc1388/LoginWithVideoDemo

转载请标注来源https://www.cnblogs.com/qqcc1388/p/7156384.html

iOS中三种方式实现登录界面播放视频或gif效果的更多相关文章

  1. Django中三种方式写form表单

    除了在html中自己手写form表单外,django还可以通过 继承django.forms.Form 或django.forms.ModelForm两个类来自动生成form表单,下面依次利用三种方式 ...

  2. java中三种方式获得类的字节码文件对象

    package get_class_method; public class ReflectDemo { /** * @param args */ public static void main(St ...

  3. iOS——浅谈iOS中三种生成随机数方法

    ios 有如下三种随机数方法:

  4. iOS中 三种随机数方法详解

    ios 有如下三种随机数方法: //第一种 srand((unsigned)time(0)); //不加这句每次产生的随机数不变 int i = rand() % 5; //第二种 srandom(t ...

  5. iOS-浅谈iOS中三种生成随机数方法

    ios 有如下三种随机数方法:

  6. ios中三种多线程的技术对比

    1.NSThread 使用较少 在NSThread调用的方法中,同样要使用autoreleasepool进行内存管理,否则容易出现内存泄露. 使用流程:创建线程-->启动线程 2.NSOpera ...

  7. java实现HTTP请求的三种方式

    目前JAVA实现HTTP请求的方法用的最多的有两种:一种是通过HTTPClient这种第三方的开源框架去实现.HTTPClient对HTTP的封装性比较不错,通过它基本上能够满足我们大部分的需求,Ht ...

  8. 【转载】java实现HTTP请求的三种方式

    目前JAVA实现HTTP请求的方法用的最多的有两种:一种是通过HTTPClient这种第三方的开源框架去实现.HTTPClient对HTTP的封装性比较不错,通过它基本上能够满足我们大部分的需求,Ht ...

  9. ios学习网络------4 UIWebView以三种方式中的本地数据

    UIWebView这是IOS内置的浏览器.能够浏览网页,打开文档  html/htm  pdf   docx  txt等待格文档类型. safari浏览器是通过UIWebView制作. server将 ...

随机推荐

  1. Spring 依赖注入（控制反转）介绍

    耦合性是软件工程中的一个重要概念.对象之间的耦合性就是对象之间的依赖性.对象之间的耦合越高,维护成本越高.因此对象的设计应使类和构件之间的耦合最小. spring Ioc思想 控制翻转也就是sprin ...

  2. [JOISC2016]サンドイッチ

    题目大意: 一个$n\times m(n,m\leq400)$的网格图中,每个格子上放了两个三明治,摆放的方式分为'N'和'Z'两种.一个三明治可以被拿走当且仅当与该三明治的两条直角边相邻的三明治均被 ...

  3. My first blog on cnBlogs!

    以后会长期更新自己的心得体会!以此锻炼自己,奋发向前.

  4. 弹出视图/弹出模态presentViewController与presentModalViewController

    一.主要用途 弹出模态ViewController是IOS变成中很有用的一个技术,UIKit提供的一些专门用于模态显示的ViewController,如UIImagePickerController等 ...

  5. andriod读写XML

    AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest xm ...

  6. WEB安全漏洞与防范

    1.XSS 原理是攻击者向有XSS漏洞的网站中输入(传入)恶意的HTML代码,当用户浏览该网站时,这段HTML代码会自动执行,从而达到攻击的目的.如,盗取用户Cookie信息.破坏页面结构.重定向到其 ...

  7. 项目笔记：导出Excel功能设置导出数据样式

    /** * 导出-新导出 * * @return * @throws IOException */ @OperateLogAnn(type = OperateEnum.EXPORT, hibInter ...

  8. Java学习之泛型和异常

    泛型 1,设计原则或目的:只要代码在编译的时候没有错误,就不会抛异常.  2,泛型通配符  :类型通配符一般是使用 ? 代替具体的类型实参.注意了,此处是类型实参,而不是类型形参!相当于(父类作用)L ...

  9. 【转】Linux 中清空或删除大文件内容的五种方法(truncate 命令清空文件)

    原文: http://www.jb51.net/article/100462.htm truncate -s 0 access.log -------------------------------- ...

  10. Nodejs扩展，实现消息弹窗

    參考https://github.com/olalonde/node-notify的实现 模块的C++代码 node_gtknotify.cc #include <v8.h> #inclu ...