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

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

赞 (0)

相关推荐

  • Android仿IOS底部弹出对话框

    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中自定义弹出pickerView效果(DEMO)

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

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

  • IOS MenuViewController实现弹出菜单效果

    IOS MenuViewController实现弹出菜单效果

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

  • iOS实现Pad上菜单弹出界面

    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的Android弹出框

    高仿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的效果

    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开发中ViewController的页面跳转和弹出模态

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

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

    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 弹出菜单

    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仿简书、淘宝等App的View弹出效果

    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

  • Android仿简书长按文章生成图片效果

    Android仿简书长按文章生成图片效果

    前言 使用简书APP的同学都知道,简书有这样一个功能:文章页长按内容时底部会出现一个 生成图片分享 的按钮,点击之后就可以将当前的文章生成一张长图片:这张图片可以保存到本地或分享给好友,同时还可为图片设置成为白和黑两种风格,很有艺术范.个人一直很喜欢这个功能. 但是从某一个版本开始,这个功能开始有bug了,生成的图片只有底部的固定标题,而没有文章内容,长图也变成了小短图.向简书意见反馈后,得到的回复是,使用点击分享按钮生成图片功能:分享菜单包含的生成长图功能的确是可以的.但是,还是很怀念之前长按

  • Android 开发仿简书登录框可删除内容或显示密码框的内容

    Android 开发仿简书登录框可删除内容或显示密码框的内容

    简书App 是我很喜欢的一款软件.今天就模仿了一下他的登录框.先上图: 好了下面上代码,自定义ImgEditText 继承与EditText.重写一些方法. package lyf.myimgedittextdemo; import android.content.Context; import android.graphics.Rect; import android.graphics.drawable.Drawable; import android.text.Editable; impor

  • Android编程实现仿美团或淘宝的多级分类菜单效果示例【附demo源码下载】

    Android编程实现仿美团或淘宝的多级分类菜单效果示例【附demo源码下载】

    本文实例讲述了Android编程实现仿美团或淘宝的多级分类菜单效果.分享给大家供大家参考,具体如下: 这里要实现的是诸如美团/淘宝/百度糯米 多级分类菜单效果.当分类数量非常多时可以考虑采用两级分类,而诸如美团这种表现方式是一个不错的选择. 首先上效果图:   主要代码: 1. PopupWindow初始化过程: popupWindow = new PopupWindow(this); View view = LayoutInflater.from(this).inflate(R.layout.

  • 纯js+css实现仿移动端淘宝网站的弹出详情框功能

    纯js+css实现仿移动端淘宝网站的弹出详情框功能

    点击查看图片 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="ap

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

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

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

  • Android编程实现仿QQ发表说说，上传照片及弹出框效果【附demo源码下载】

    Android编程实现仿QQ发表说说，上传照片及弹出框效果【附demo源码下载】

    本文实例讲述了Android编程实现仿QQ发表说说,上传照片及弹出框效果.分享给大家供大家参考,具体如下: 代码很简单,主要就是几个动画而已,图标什么的就随便找了几个,效果图:   动画说明: 1.点击右上角按钮,菜单从顶部下拉弹出,同时背景变暗; 2.再次点击右上角按钮,点击返回键,或者点击空白区域(也就是变暗的部分),菜单向上收回; 3.点击菜单上的按钮响应事件,同时菜单收回(效果同2) 重要说明:动画结束后必须clearAnimation,否则隐藏状态的view依然能响应点击事件 主体代码

  • JS实现的仿QQ空间图片弹出效果代码

    本文实例讲述了JS实现的仿QQ空间图片弹出效果代码.分享给大家供大家参考,具体如下: <script type="text/javascript"> function imageShow(which_click) { var image_path = which_click; //alert(image_path); var tag_top = Math.max(document.documentElement.scrollTop, document.body.scroll

  • iOS实现淘宝上拉进入详情页交互效果

    iOS实现淘宝上拉进入详情页交互效果

    前言 这篇文章主要给大家介绍的是利用iOS实现淘宝中上拉进入详情页交互的效果,下面话不多说,来看看详细的实现过程. 实现分析 可以看到,该页面是分为两部分的,一部分是一开始就能看到的商品信息,然后我们上拉屏幕,屏幕不断往上滚动,滚动到第一部分结束时可以看到底部有"继续拖动,查看图文详情"一行文本出现.继续上拉到一个临界点便触发了翻页,此时第二部分以动画的形式从底部涌出占满整个屏幕.而且效果是该页面整体上移了,即第一部分和第二部分都是上移的. 此时,第二部分占满着整个屏幕,若我们下拉屏幕

  • Android仿简书搜索框效果的示例代码

    Android仿简书搜索框效果的示例代码

    前言 之前用简书的时候一直是在web端,后来下载了客户端,看到了搜索的那个动画,就尝试的去写了,没写之前感觉挺容易的,写了之后,就感觉里面还是有些要注意的东西的.话不多说,直接上图. Activity 布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&quo

随机推荐