昨天用简书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

https://github.com/Wzxhaha/WZXJianShuPopDemo

仿简书、淘宝等等App的View弹出效果的更多相关文章

  1. 使用SwipeRefreshLayout和RecyclerView实现仿“简书”下拉刷新和上拉载入很多其它

    一.概述 本篇博客介绍的是怎样使用SwipeRefreshLayout和RecyclerView实现高仿简书Android端的下拉刷新和上拉载入很多其它的效果. 依据效果图能够发现,本案例实现了例如以 ...

  2. JS仿淘宝详情页菜单条智能定位效果

    类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...

  3. 用vue写一个仿简书的轮播图

    原文地址:用vue写一个仿简书的轮播图 先展示最终效果: Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮 ...

  4. Android PopupWindow 仿微信弹出效果

    项目中,我须要PopupWindow的时候特别多,这个东西也特别的好使,所以我今天给大家写一款PopupWindow 仿微信弹出效果.这样大家直接拿到项目里就能够用了! 首先让我们先看效果: 那么我首 ...

  5. 仿酒仙网的一款jQuery侧栏弹出导航栏特效

    仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特效.大家可以拿去研究研究 . 注意:该特效还支持挨千刀的IE6啊,之强大. ...

  6. Android 仿 新闻阅读器 菜单弹出效果(附源码DEMO)

    这一系列博文都是:(android高仿系列)今日头条 --新闻阅读器 (一) 开发中碰到问题之后实现的,觉得可能有的开发者用的到或则希望独立成一个小功能DEMO,所以就放出来这么一个DEMO. 原本觉 ...

  7. Android开发之多级下拉列表菜单实现(仿美团,淘宝等)

    注:本文转载于:http://blog.csdn.net/minimicall/article/details/39484493 我们在常用的电商或者旅游APP中,例如美团,手机淘宝等等,都能够看的到 ...

  8. 仿简书分享:UIActivityViewController系统原生分享

    接下来介绍UIActivityViewController: 1. 创建要分享的数据内容,加在一个数组 ActivityItems里. NSString *textToShare = @"我 ...

  9. 仿简书MarkDown编辑器可同步滚动

    模仿简书的MarkDown编辑器,使用Angular8写的示例 1.支持同步滚动 编辑的过程中,右侧预览界面会同步滚动.滚动右侧预览界面,左侧编辑区也会同步滚动哦 2.支持语法高亮 如下: using ...

随机推荐

  1. NOIP2010 乌龟棋

    2乌龟棋 题目背景 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 题目描述 乌龟棋的棋盘是一行N个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第N格是终点,游戏要求玩家控制一个乌 ...

  2. [转载]mac下homebrew的使用

    该文转自:https://www.zybuluo.com/phper/note/87055 mac系统也是基于unix的系统,所以也继承类很多unix的特性,包括软件的编译,安装等.ubuntu下有快 ...

  3. 【Hadoop代码笔记】Hadoop作业提交之客户端作业提交

    1.      概要描述仅仅描述向Hadoop提交作业的第一步,即调用Jobclient的submitJob方法,向Hadoop提交作业. 2.      详细描述Jobclient使用内置的JobS ...

  4. HDU-4694 Professor Tian 概率DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4649 题意:给一个位运算的表达式,每个运算符和其后的运算数有一定概率不计算,求最后表达式的期望. 因为 ...

  5. Raspberry Pi无线路由器篇

    RaspberryPi可以折腾的方法很多,我将会吧自己的折腾经验与大家分享.   作为无线路由器,需要提供dhcp的功能和无线ap的能力,我们分别通过isc-dhcp-server和hostapd这两 ...

  6. 转载 : Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结 投稿:jingxian 字体:[增加 减小] 类型:转载 时间:2013-11-14我要评论 本文是 ...

  7. Python FTP多线程爆破脚本

    初学python, 自己编写了个FTP多线爆破小脚本代码很丑= = #!usr/bin/env python #!coding=utf-8 __author__='zhengjim' from ftp ...

  8. 获利能力分析COPA的BAPI:BAPI_COPAACTUALS_POSTCOSTDATA 通过增强返回凭证号

    用这个BAPI:BAPI_COPAACTUALS_POSTCOSTDATA 记录销售成本的时候,发现不能return生产的co凭证号,利用内存应该是最好的方法. SCN上的帖子:https://blo ...

  9. Android Studio怎么删除项目

    本 新手最近学Android都是用的eclipse.其实个人觉得eclipse不错,可能接触Android不久,倒也不觉得它慢还是怎样.对于 Google的Android studio也是早有耳闻,前 ...

  10. Gitbook安装

    Gitbook安装 Gitbook是从NMP安装的,命令行: $ npm install gitbook -g 安装完之后,你可以检验下是否安装成功: $ gitbook -V 0.4.2 如果你看到 ...