现在有越来越多的 app 的登录/注册界面的背景是播放视频或者 gif,我主要看了 Uber 和 keep 的登录界面再配合拉勾的登录界面仿作了一个登录界面。

1.首先,查资料

我在 github 上找到了这两个库:

-STLBGVideo 这个库是 oc 写的,但你的登录页面需要继承这个 VC,借用了下里面的资源,侵权告知

-VideoSplashKit 国外牛人写的 swift 版本,借鉴了下里面的思路

-附上本文的链接 https://github.com/sfmDev/videoLoginDemo

2.写视频播放器

先导入

@interface ViewController ()

/**

* 全屏播放器

*/

@property (strong, nonatomic) AVPlayer *player;

@end

创建播放图层,AVPlayer的播放器 是加在 layer 层上的,就是 AVPlayerLayer

- (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;

}

- (void)__playerItemDidPlayToEndTimeNotification:(NSNotification *)sender

{

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

}

设置播放的内容

- (AVPlayerItem *)getPlayItem

{

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

NSURL *url = [NSURL fileURLWithPath:filePath];

AVPlayerItem *playerItem = [AVPlayerItem playerItemWithURL:url];

return playerItem;

}

现在得到这样的一个视频播放,上面的注册 登录是我自己加的

屏幕快照 2016-02-17 下午11.01.04.png

现在,问题又来了,如果程序从前台切到后台,再从后台切到前台,视频会停止播放

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

//在app 进入活跃的时候发通知,让视频继续播放

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

}

这样基本就完成了视频播放的主要设置,还可以设置一些动画,我写的 demo 里的登录时仿照拉勾写的,暂时还没有打到我理想的效果,就先不写了,放在下一篇中再讲登录界面中的动画,觉得有兴趣的同学欢迎 star

android uber启动动画,仿 Uber 视频背景登录界面以及登录动画相关推荐

  1. ios 仿电脑qq登录界面_1、IOS开发--iPad之仿制QQ空间(登录界面搭建+登录逻辑实现)...

    开始搭建登录界面 登录界面效果图: 步骤开始: 设置辅助窗口的位置在下方 快捷键option,然后拖拽复制之后: 这里就直接省去了将背景颜色改为经典黑了. 到这里QQ空间的登录界面搭建完毕. 下面进行 ...

  2. android开发实例之minitwitter登录界面+代码,登录界面_记住密码

    实现登录界面的记住密码功能 实验目的 1.掌握SharedPreferences类,这个类可以实现简单的存储,主要用于保存窗口状态 实验效果 主要代码 LoginActivity package co ...

  3. 一个Android平台下的仿微信视频聊天悬浮窗

    闲来无事想自己手写一个类似微信视频聊天悬浮窗的效果,由于笔者是第一次写技术类的文章,不足的地方,还请各位多多谅解哈.另外由于篇幅有限,在此只展示关键代码.首先我们定义二个按钮,一个是创建悬浮窗,一个是 ...

  4. Android 文字 流光特效(仿锁屏文字的白光闪过动画效果)

    最近有需求说要开发一个新模块,再模块的入口 用动画 提醒用户.模仿的动画效果 如下: 经过百度,发现Android 这类的动画很少,通过度娘知道可以通过 LinearGradient 线性渲染 来实现 ...

  5. uniapp仿朋友圈背景图,下拉动画

    可以把下面代码先粘贴过去再细细研究一下,就是做动画,代码是可以实现效果的 <template><view class="pages" @touchmove=&qu ...

  6. 运用计算机来动画制作的视频,如何制作一个时钟转动动画视频?电脑制作动画的软件制作时钟转动的小视频的方法...

    今天小编要来介绍的是制作动画的软件,可以用于制作时钟转动的动画效果,之前小编就介绍过时钟动画制作的方法,但今天的方法更先进哦,这里的时钟的样式还有颜色都可以自定义的哦.制作动画的软件是什么?不是手机自 ...

  7. gif透明背景动画_PS教程:制作动态界面展示GIF动画效果

    很多时候我们在网站上看到很多炫酷的动态界面效果,他们呈现着立体的效果,不仅是界面有着动画,并且在侧面我们也能清晰的看到随着页面动画也在发生变化.这么炫酷的效果到底是如何制作出来的呢?今天我们就一起来学 ...

  8. android app启动图片 加动画效果,Android Studio开发APP启动程序时开屏简单动画效果快速有效解决方案...

    Android Studio开发APP启动程序时开屏简单动画效果快速有效解决方案 大家在设计APP的末期,都会想给APP搞一些"花里胡哨"的特效来提高APP的B格.博主表示亲测有效 ...

  9. android 视频背景图片,安卓手机怎么给视频添加背景图片 上下图片中间视频画面的小视频制作...

    狸窝是帮助用户解决问题 提供教程解决方案 在这个过程中有使用我们自己开发的软件 也有网上找的工具 只要帮助用户解决问题就好!同意则往下继续了解学习 ... 注意此教程方案是:『安卓手机端教程方案』.很 ...

最新文章

  1. MongoDB数据库(一:基本操作)
  2. ORACLE数据库在导入导出时序列不一致的问题
  3. java applet 游戏_Java Applet实现五子棋游戏
  4. linux 读取 gateway ip socket,linux下获取本地IP信息(没看代码)
  5. ubuntu16.04下安装windows软件,以及卸载.
  6. .bash_profile .bashrc profile 文件的作用的执行顺序
  7. 【思维导图】旅行物品清单
  8. Canvas Api(全)
  9. matlab eemd输出,MATLAB信号处理EEMD工具箱
  10. YAPI工具入门手册
  11. 2013年十大免费空间综合排行榜-稳定,可靠,速度快,可建站免费空间
  12. Android OpenGL ES视频渲染(一)GLSurfaceView
  13. 阿里达摩院人工智能科学家杨红霞离职,AI商用是难题
  14. javaweb企业员工考勤管理系统案例
  15. 所见即所得的html制作,做一个所见即所得的CSS效果
  16. 数据库的安装卸载与使用
  17. 埃森哲杯第十六届上海大学程序设计联赛春季赛暨上海高校金马五校赛 A - Wasserstein Distance
  18. 2018年了,希望所有的程序员都能逃过这些梗……
  19. SEO工具箱:查询被收录页面中的死链接
  20. 成长一夏 挑战赛来袭 | 学习、创作两大赛道,开启导师报名啦!

热门文章

  1. 自定义依赖注解无效_SpringValidation用注解代替代码参数校验解析
  2. R语言acres92 region_[R语言 学习笔记] circlize绘制基因组圈图的原理与使用(一)...
  3. des java c_这个des加密,到底是用的哪种类型?
  4. python基础课程7(看代码看注释)--matplotlib作图
  5. python学习服务器端socket建立
  6. linux sz到指定的机器,linux 机器之间 zssh, rz, sz互相传输讲解
  7. php自动抓取文章图片,从文章中提取图片,把图片保存到本地,自动提取缩略图...
  8. java 图类_Java集合类,一张图说清楚!
  9. mixin机制 vue_vue mixins组件复用的几种方式(小结)
  10. js判断对象是否为空对象_js对象