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

 _popView = ({
  UIView * popView = [[UIView alloc]initWithFrame:CGRectMake(0, [UIScreen mainScreen].bounds.size.height, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height /2.0)];

  popView.backgroundColor = [UIColor grayColor];

  //加个阴影
  popView.layer.shadowColor = [UIColor blackColor].CGColor;
  popView.layer.shadowOffset = CGSizeMake(0.5, 0.5);
  popView.layer.shadowOpacity = 0.8;
  popView.layer.shadowRadius = 5;

  //关闭btn
  UIButton * closeBtn = [UIButton buttonWithType:UIButtonTypeCustom];
  closeBtn.frame = CGRectMake(15, 0, 50, 40);
  [closeBtn setTitle:@"关闭" forState:UIControlStateNormal];
  [closeBtn setTitleColor:[UIColor colorWithRed:217/255.0 green:110/255.0 blue:90/255.0 alpha:1] forState:UIControlStateNormal];
  [closeBtn addTarget:self action:@selector(close) forControlEvents:UIControlEventTouchUpInside];
  [popView addSubview:closeBtn];
  popView;
}); 

 //添加VC的View的方法
 _rootVC.view.frame = self.view.bounds;
 _rootVC.view.backgroundColor = [UIColor whiteColor];
 _rootview = _rootVC.view;
 [self addChildViewController:_rootVC];
 [self.view addSubview:_rootview];

 //rootVC上的maskView
 _maskView = ({
  UIView * maskView = [[UIView alloc]initWithFrame:self.view.bounds];
  maskView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.5];
  maskView.alpha = 0;
  maskView;
 });
  [_rootview addSubview:_maskView];

2.然后要添加点击事件,这里为了方便我的弹出事件直接用的touchesBegan

- (void)show
{
 [[UIApplication sharedApplication].windows[0] addSubview:_popView];

 CGRect frame = _popView.frame;
 frame.origin.y = self.view.frame.size.height/2.0;

 [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{

  [_rootview.layer setTransform:[self firstTransform]];

 } completion:^(BOOL finished) {

  [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{

   [_rootview.layer setTransform:[self secondTransform]];
   //显示maskView
   [_maskView setAlpha:0.5f];
   //popView上升
   _popView.frame = frame;

  } completion:^(BOOL finished) {

  }];

 }];

}

这里要注意一下的就是popview是添加到window上面的:[[UIApplication sharedApplication].windows[0] addSubview:_popView];

然后关键的layer形变方法来了

- (CATransform3D)firstTransform{
 CATransform3D t1 = CATransform3DIdentity;
 t1.m34 = 1.0/-900;
 //带点缩小的效果
 t1 = CATransform3DScale(t1, 0.95, 0.95, 1);
 //绕x轴旋转
 t1 = CATransform3DRotate(t1, 15.0 * M_PI/180.0, 1, 0, 0);
 return t1;

}

- (CATransform3D)secondTransform{

 CATransform3D t2 = CATransform3DIdentity;
 t2.m34 = [self firstTransform].m34;
 //向上移
 t2 = CATransform3DTranslate(t2, 0, self.view.frame.size.height * (-0.08), 0);
 //第二次缩小
 t2 = CATransform3DScale(t2, 0.8, 0.8, 1);
 return t2;
}

大家可以看到这,应该可以发现这里其实有两次形变

3.隐藏动画

- (void)close
{
 _isShow = NO;

 CGRect frame = _popView.frame;
 frame.origin.y += self.view.frame.size.height/2.0;

 [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{

  //maskView隐藏
  [_maskView setAlpha:0.f];
  //popView下降
  _popView.frame = frame;
  //同时进行 感觉更丝滑
  [_rootview.layer setTransform:[self firstTransform]];

 } completion:^(BOOL finished) {

  [UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
   //变为初始值
   [_rootview.layer setTransform:CATransform3DIdentity];

  } completion:^(BOOL finished) {

   //移除
    [_popView removeFromSuperview];
  }];

 }];

}

最后,完整代码,已经封装好了,继承之后使用创建方法就行了

GitHub:Wzxhaha

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

时间: 2016-09-16

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

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

IOS MenuViewController实现弹出菜单效果

在写项目时,要实现一个从下移上来的一个弹出菜单,并且背景变深的这么一个效果,在此分享给大家. 主要说一下思路及一些核心代码贴出来,要想下载源码,请点击下载:MenuViewController 一个简单,效果好,比较实用的菜单弹出效果的实现,效果图: 实现方式:将self.view当前页面缩小,在当前页的上面添加一个菜单的view,即在self.view.superview添加. //显示 - (void) show:(UIView*)parent { parentView = parent;

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

高仿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

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

iOS10 widget实现3Dtouch 弹出菜单

文章将依次从以下几个问题着手,进行详细说明: 1.如何为现有的工程添加widget: 2.如何绘制UI: 3.如何调起app: 4.如何与host app共享数据. 图2 添加today的target 图3 添加today之后的工程目录 这是添加Today Extension之后的工程目录. 到这里,为现有的工程添加Today Extension算是完成了,运行程序就可以看到类似图1的简单的效果了,很简单哈. 绘制UI 图4 删除默认创建的MainInterface并修改Info.plist 这

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

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

Android仿IOS底部弹出对话框

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

iOS实现Pad上菜单弹出界面

前言: 此种方式实现只适用于pad开发,在iPhone上是无效的. 实现: 比如我在界面上有一个按钮,点击按钮,在按钮旁边弹出一个Pop框. 1.按钮点击事件 btn.addTarget(self, action: #selector(self.popShow), for: .touchUpInside) 2.事件处理 /// 弹框选择条件 /// /// - Parameter sender: <#sender description#> func popShow(sender:UIButt

iOS下拉选择菜单简单封装

本文实例为大家分享了简单封装的iOS下拉选择菜单代码,供大家参考,具体内容如下 // // OrderListDownMenu.h #import <UIKit/UIKit.h> @protocol OrderListDownMenuDelegate <NSObject> - (void)OrderListDownMenu:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath; @end

iOS实现scrollview上拉显示Navbar下拉隐藏功能详解

本文主要介绍的是关于iOS中scrollview上拉显示Navbar下拉隐藏的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 动画效果: 关于下拉隐藏Nabbar,上拉显示,有三种方式:推崇第一种,但是做的还是没简书.知乎那样流畅,第一种是对navbar做了平移,第二种,第三种都是隐藏.. 方法如下: 第一种,和第二种处理时机一样,但是效果更好,并没有处理Navbar 的隐藏. -(void)scrollViewWillBeginDragging:(UIScrollView *)scr

swift在IOS应用图标上添加提醒个数的方法

在应用图标右上角添加消息数提醒,可以很方便的告知用户该应用中有无新消息需要处理.下面用xcode 7.3.1来简要说明一下如何用swift语言进行此功能的实现. 1.修改 AppDelegate.swift // // AppDelegate.swift // RainbowDemo // // Created by Jackwang on 16/8/17. // Copyright © 2016年 Jackwang . All rights reserved. // import UIKit

iOS中长按调出菜单组件UIMenuController的使用实例

UIMenuController的使用 UIMenuController的展现需要基于一个View视图,其交互则需要基于其所在View视图的Responder.举例来说,如果一个UIMenuController展现在当前ViewController的View上,则此UIMenuController的交互逻辑交由当前的ViewController进行管理. 在界面展示出UIMenuController需要3个条件: 1.当前的Responder处于第一响应. 2.UIMenuController对

iOS中打包上传常见的错误与解决办法

一.ERROR ITMS-90535 首先这个原因导入了其他第三方导致的问题,首先找到友盟库里面的腾讯API,找到其中的info.plist文件: 找到箭头所指向的一行,随后删掉 这一行 就可以了: 二.ERROR ITMS-90635 这个是由于项目中有使用到Cocoapods导入第三方的库使用bitcode造成的,此种错误我在网上找到了三种解决办法: 方法一 项目->targets->enable bitcode->no pods->project->enable bit

iOS 三级下拉菜单功能实现

前言 App 常用控件 -- 多级下拉菜单, 如团购类, 房屋类, 对数据进行筛选. 有一级, 二级, 三级, 再多就不会以这种样式,呈现给用户了. 作者就简单聊一下 多级下拉菜单 一 目标 默认显示一个 TableView, 点击数据后, 添加第二个TableView, 并实现大小变化 第二次打开下拉菜单. 保存上次选中数据 二 菜单控件DropMenuView .h文件 #import <UIKit/UIKit.h> @class DropMenuView; @protocol DropM

iOS实现文件上传功能

iOS中用系统提供的API能实现能实现文件的上传与下载,分别有两种方式.NSURLConnection与NSURLSession. 其中NSURLConnection是使用很久的的一种方式,NSURLSession是新出来的一种方式. 一. POST方式上传 POST方式提交信息默认使用的是 : *Content-Type:  application/x-www-form-urlencoded. *输入中文时,post方式自动进行转义(苹果中自动). 国内的绝大多数网站都采用这种方式上传文件(支

iOS中的二级菜单及Cell的展开收起示例

最近又做了一个项目,涉及到二级菜单及cell的展开收起,这是我所做过的第三个项目中做这个功能了,我当然不能把公司的项目界面show出来,所以我重新创建一个工程,数据都写的是固定的数据.作为总结,记录实现过程,及要注意的一些点:如进来默认选中第一行,数据优化等. 先看看我们实现的效果: 基本UI布局思路: 1.将view分为左右两部分,左,右分别是一个tableView 2.点击左边的cell时候,刷新右边的数据 需要注意及处理的点有: 1.默认进来界面显示左边选中第一行,及对应右边的数据 2.每

iOS实现视频压缩上传实例代码

之前写过图片上传PHP服务器,今天把接口稍微改了一下,把视频上传的代码贴出来,目前上传功能已经调通,视频的压缩代码上似乎并不完善,后续会完善压缩部分的代码: - (void)convertVideoWithURL:(NSURL *)url { NSDate *date = [NSDate date]; NSDateFormatter *dateformatter = [[NSDateFormatter alloc]init]; [dateformatter setDateFormat:@"YYY