iOS仿AirPods弹出动画

本文实例为大家分享了iOS仿AirPods弹出动画的具体代码,供大家参考,具体内容如下

效果图

预览图

思路

在当前ViewController下Present另外一个AnimationViewController,在弹出的AnimationViewController中播放动画,弹出的时候原来的ViewController上有一个全屏覆盖的maskView,在弹出时,有一个渐变动画(页面渐黑),在AnimationViewController声明一个代理,在代理方法中实现收起的动画效果(dissmissController和maskView消失)

主要代码

HCAirPodsAnimationViewController *vc = [[HCAirPodsAnimationViewController alloc] init];
  vc.delegate = self;
  vc.modalPresentationStyle = UIModalPresentationOverCurrentContext;

  [UIView animateWithDuration:0.2 animations:^{
    self.maskBgView.alpha = 0.5;
  } completion:nil];

  [self presentViewController:vc animated:YES completion:^{
    [vc.animationView play];
  }];

模态跳转的style有一个枚举值,在iOS13以前modalPresentationStyle的默认值为UIModalPresentationFullScreen,iOS13以后变成了UIModalPresentationPageSheet,在这里我们把style设置为UIModalPresentationOverCurrentContext弹出的这个控制器就会覆盖在原来的控制器之上

- (UIView *)maskBgView
{
  if (!_maskBgView) {
    _maskBgView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
    _maskBgView.backgroundColor = [UIColor blackColor];
    _maskBgView.alpha = 0;
    [self.view addSubview:_maskBgView];
  }
  return _maskBgView;
}

一个覆盖全屏的maskView采用懒加载的方式实现

- (void)initContentView
{
  CGFloat containerW = SCREEN_WIDTH - 20;
  CGFloat containerH = containerW * 0.9;
  UIView *containerView = [[UIView alloc] initWithFrame:CGRectMake(10, SCREEN_HEIGHT - containerH - 10, containerW, containerH)];
  containerView.layer.cornerRadius = 20;
  containerView.backgroundColor = [UIColor whiteColor];
  [self.view addSubview:containerView];

  self.animationView = [[LOTAnimationView alloc] initWithFrame:CGRectMake(70, 70, containerW - 140, containerH - 140)];
  [containerView addSubview:self.animationView];
  self.animationView.animation = @"gift_animation";

  self.animationView.loopAnimation = YES;

  UIButton *confirmButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 200, 34)];
  confirmButton.center = CGPointMake(self.animationView.center.x, containerH - 44);

  [confirmButton setTitle:@"Close" forState:UIControlStateNormal];
  [confirmButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];

  [confirmButton setBackgroundColor:[UIColor blueColor]];
  confirmButton.layer.cornerRadius = 10;

  [confirmButton addTarget:self action:@selector(onConfirmButtonClick) forControlEvents:UIControlEventTouchUpInside];
  [containerView addSubview:confirmButton];
}

动画这里用到的是Lottie这个动画开源库(Airbnb),这个开源库主要的功能是可以将After Effects制作的动画通过插件导出为json格式的文件,然后通过这个开源库解析成动画。

- (void)onConfirmButtonClick
{
  if ([self.delegate respondsToSelector:@selector(onAirPodsAnimationViewControllerConfirmButtonClick:)]) {
    [self dismissViewControllerAnimated:YES completion:nil];
    [self.delegate onAirPodsAnimationViewControllerConfirmButtonClick:self];
  }
}

dissmiss当前的控制器,让viewController来实现这个代理方法,并且在代理方法中隐藏maskView

- (void)onAirPodsAnimationViewControllerConfirmButtonClick:(HCAirPodsAnimationViewController *)vc
{
  [UIView animateWithDuration:0.2 animations:^{
    self.maskBgView.alpha = 0.0;
  } completion:nil];
}

项目地址:AirPodsAnimation

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2019-12-12

react-native 封装选择弹出框示例(试用ios&android)

在开发 App 的时候,经常会使用到对话框(又叫消息框.提示框.告警框). 在web开发中经常会用得到.今天就来介绍了一下react-native 封装弹出框 之前看到react-native-image-picker中自带了一个选择器,可以选择拍照还是图库,但我们的项目中有多处用到这个选择弹出框,所以就自己写了一下,最最重要的是ios和Android通用.先上动态效果图~ 一.封装要点 1.使用动画实现弹框布局及显示隐藏效果 2.通过一个boolean值控制组件的显示隐藏 3.弹框选项数组通过

android底部弹出iOS7风格对话选项框(QQ对话框)--第三方开源之IOS_Dialog_Library

先给大家展示下效果图,喜欢的朋友可以下载源码哦. 完成这个效果的是使用了 IOS_Dialog_Library 下载地址:http://xiazai.jb51.net/201509/yuanma/IOS_Dialog_Library(jb51.net) 下载后导入到Eclipse中,然后作为Library引入到自己的工程中,直接作为第三方控件使用. 测试代码: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/a

解决ios模拟器不能弹出键盘问题的方法

其实这个问题,多多少少的新人都遇到过,主要可能是我们误使用快捷键切换造成的!   解决办法:如上图:切换模拟器到前台,画红线的第一个意思是连接实体键盘,选中的话就是在模拟器上我们直接可以使用外接键盘进行输入:第二行画横线的意思就是使用软键盘!如果模拟器不能弹出键盘,我们可以手动去掉第一行画红线的选中状态,或者直接使用快捷键commod + k 切换,如果需要使用实体键盘,选中第一行红线的选项,或者使用快捷键shift + commod +k 切换! 问题就这样解决了,希望这篇短小的文章对大家的学

iOS中自定义弹出pickerView效果(DEMO)

UIPickerView平常用的地方好像也不是很多,顶多就是一些需要选择的地方,这次项目需要这一个功能,我就单独写了一个简单的demo,效果图如下: 新增主页面弹出view,在主页面添加的代码 有个小问题就是第四个直接添加在主页弹出来的view好像被导航栏给覆盖了,我还没去研究,就着急的先吧功能写了.大家谅解下 最初版本 话说我终于弄了gif了,再也不要去截图每张图都发一遍了!! 这个demo呢,等于是可以拿来直接用的第三方了吧,只需要传数据就可以了,弹出的三个框显示的数据也不一样,我的封装能力

高仿IOS的Android弹出框

先看一下效果图,不过这是网上的图片. 效果不错,就借此拿来与大伙分享分享. github源码地址:https://github.com/saiwu-bigkoo/Android-AlertView. 1.怎么用:添加依赖. compile 'com.bigkoo:alertview:1.0.3' 2.实例demo(大家可以根据需要来选择自己需要的框框). package com.example.my.androidalertview; import android.app.Activity; i

iOS自定义提示弹出框实现类似UIAlertView的效果

首先来看看实现的效果图 下面话不多说,以下是实现的示例代码 #import <UIKit/UIKit.h> typedef void(^AlertResult)(NSInteger index); @interface XLAlertView : UIView @property (nonatomic,copy) AlertResult resultIndex; - (instancetype)initWithTitle:(NSString *)title message:(NSString

Android仿IOS底部弹出对话框

在Android开发过程中,常常会因为感觉Android自带的Dialog的样式很丑,项目开发过程中会影响整体效果,会使得开发过程很是忧伤....(话唠时间结束!) 本文我将介绍一款开源的Dialog仿IOS底部弹窗效果IOS_Dialog_Library的使用.我将通过几个简单的示例介绍IOS_Dialog_Library.zip的使用方法. 1.IOS_Dialog_Library是开源的Dialog框架,所以首先你得下载IOS_Dialog_Library.zip包,并作为Library引

ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)

在使用ionic开发IOS系统微信的时候会有一个苦恼的问题,填写表单的时候键盘会挡住输入框,其实并不算什么大问题,只要用户输入一个字就可以立刻看见输入框了. 可惜的是,有些客户是不讲理的,他才不管这个问题,反正就是不行,所以在一天睡觉的时候突然惊醒,想出来这个方案. 我就不仔细讲代码了,直接上图 angular.module('MyApp') .directive('focusInput', ['$ionicScrollDelegate', '$window', '$timeout', '$io

iOS仿简书、淘宝等App的View弹出效果

用简书App的时候觉得这个View的弹出效果特别好,而且非常平滑,所以我就尝试写了一个,和简书App上的效果基本一致了: 下面开始讲解: 1.首先我们要知道这个页面有几个View?这个页面其实有四个View,self.view , 图中白色VC的View rootVC.view ,白色VC上的maskView maskView , 以及弹出的popView popView .我们创建它们: self.view.backgroundColor = [UIColor blackColor]; _po

iOS开发中ViewController的页面跳转和弹出模态

ViewController 页面跳转 从一个Controller跳转到另一个Controller时,一般有以下2种: 1.利用UINavigationController,调用pushViewController,进行跳转:这种采用压栈和出栈的方式,进行Controller的管理.调用popViewControllerAnimated方法可以返回. 复制代码 代码如下: PickImageViewController *ickImageViewController = [[PickImageV

iOS开发中常用的各种动画、页面切面效果

今天主要用到的动画类是CALayer下的CATransition至于各种动画类中如何继承的在这也不做赘述,网上的资料是一抓一大把.好废话少说切入今天的正题. 一.封装动画方法 1.用CATransition实现动画的封装方法如下,每句代码是何意思,请看注释之. #pragma CATransition动画实现 - (void) transitionWithType:(NSString *) type WithSubtype:(NSString *) subtype ForView : (UIVi

iOS 开发中 NavigationController经常出现的问题原因分析

情况一: MyViewController *sampleViewController = [[[MyViewController alloc]initWithXXX] autorelease]; [self.navigationController pushViewController: sampleViewController animated:true]; BUG:界面无反应 分析可能出错的原因: 1:self.navigationController为nil,空指针执行pushViewC

iOS开发中AVPlayer的简单应用

前言 在iOS开发中,播放视频通常有两种方式,一种是使用MPMoviePlayerController(需要导入MediaPlayer.Framework),还有一种是使用AVPlayer.关于这两个类的区别简而言之就是MPMoviePlayerController使用更简单,功能不如AVPlayer强大,而AVPlayer使用稍微麻烦点,不过功能更加强大.下面这篇文章主要介绍下AVPlayer的简单应用,需要的朋友们一起来看看吧. AVPlayer的简单应用 1.引入系统框架 2.创建视频的u

IOS开发中禁止NavigationController的向右滑动返回

IOS开发中禁止NavigationController的向右滑动返回 大家在进行开法的时候细心的朋友会发现,.用后在屏幕的最左边,向右滑动,,你会发现,你的App返回到了上一个页面,这是怎么回事呢, 在你的App中输入UINavigationController ,然后按住commend键,点击鼠标,跳进去,如下图: 在UINavigationController 的属性中你会发现 红色下划线部分,你看到了UINavigationController 自带的有一个panGeesture,所以,

比较IOS开发中常用视图的四种切换方式

在iOS开发中,比较常用的切换视图的方式主要有以下几种: 1. push.pop 使用举例(ViewController假设为需要跳转的控制器): [self.navigationController pushViewController:ViewController animated:YES]; //入栈,跳转到指定控制器视图 [self.navigationController popViewControllerAnimated:YES]; //弹栈,返回到前一个视图 [self.navig

IOS开发中键盘输入屏幕上移的解决方法

在IOS开法中经常会遇到键盘遮挡屏幕的事情(比如输入账号密码验证码等等),就使得原本都不大的屏幕直接占了一半甚至更多的位置,这倒无所谓,关键是挡住了下面的按钮.这样的话按钮的事件也就触发不了,最好的解决办法就是当输入这些信息的时候让整个屏幕上移一个键盘的位置,或者上移到指定的位置. 首先一般输入的话都用的是UITextField,所以要监听用户什么时候开始输入和什么时候结束输入,直接设置代理代理就行了,要遵受 UITextFieldDelegate协议. //遵循协议 @interface Vi

Android编程中Intent实现页面跳转功能详解

本文实例讲述了Android编程中Intent实现页面跳转功能.分享给大家供大家参考,具体如下: 安卓四大组件:Activity.Service.Broadcast Receiver.Content Provider Intent实现页面之间跳转 1.无返回值 startActivity(intent) 2.有返回值 startActivityForResult(intent,requestCode); onActivityResult(int requestCode,int resultCod

IOS开发中加载大量网络图片优化方法

IOS开发中加载大量网络图片如何优化 1.概述 在IOS下通过URL读一张网络图片并不像其他编程语言那样可以直接把图片路径放到图片路径的位置就ok,而是需要我们通过一段类似流的方式去加载网络图片,接着才能把图片放入图片路径显示.比如: -(UIImage *) getImageFromURL:(NSString *)fileURL { //NSLog(@"执行图片下载函数"); UIImage * result; NSData * data = [NSData dataWithCont

浅谈iOS开发中static变量的三大作用

(1)先来介绍它的第一条也是最重要的一条:隐藏 当我们同时编译多个文件时,所有未加static前缀的全局变量和函数都具有全局可见性.为理解这句话,我举例来说明.我们要同时编译两个源文件,一个是a.c,另一个是main.c. 下面是a.c的内容 char a = 'A'; // global variable void msg() { printf("Hello\n"); } 下面是main.c的内容 int main(void) { extern char a; // extern v