《Motion Design for iOS》(二十五)

现在我们已经了解了Core Animation的基础并且使用了优秀的框架JNWSpringAnimation来模仿弹簧系统,是时候来开始写一些真实的示例代码了。

仿制一个iOS AlertView

重现一个熟悉的界面元素是一个很好的熟悉动画开发的方式。首先,让我们创建我们自己的标准iOS警告视图。这是内置的警告视图的样子。





在本指南之前的章节中,我解释了分解一个动画的各个组成部分有多么重要,这样你就可以准确地构建它。仅仅说“警告框动画进入屏幕”是不够的,你需要准确地知道发生了什么。让我们来分解这个动画。

  1. 屏幕随着渐入的一层半透明灰覆盖变暗。
  2. 警告框从完全透明以及比1.0倍大的大小开始,并动画至100%不透明和1.0倍大小。
  3. 消失的时候,它会淡出为完全透明并且比例会动画减小到比1.0要小。
  4. 阴暗的覆盖层淡出并消失。

在我们进入详细的代码之前,让我们看看我们要完成的警告框是什么样子的。





首先让我们创建一个简单的有白色背景的应用窗口。这是在应用的delegate类中,并且代码会在app完成启动的时候就立即运行。你可以在Alert View 1 Xcode工程中参考代码。

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    // Construct the main window for this application
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    // All additional code in this example will go right here

    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    return YES;
}

在这一步,我们有一个UIWindow,其位置和方向可以准确地填充屏幕,并且背景色被设为了白色。如果我们现在立马运行它,它只会在模拟器中(或者你的手机,如果连接了的话)运行一个空的、白色的应用屏幕。现在来创建我们的覆盖层,将其添加到屏幕上,并将透明度设为0.0,因为我们现在不想显示它。

UIView *overlayView = [[UIView alloc] initWithFrame:self.window.bounds];
overlayView.backgroundColor = [UIColor blackColor];
overlayView.alpha = 0.0f;
[self.window addSubview:overlayView];

这个覆盖层是一个简单的UIView,填充了整个主窗口对象。这意味着它会被放置在窗口的左上角,并且其宽和高会匹配窗口,从而覆盖所有的内容。为了显示我现在有的内容,如果我提高覆盖层的不透明度,这就是看起来的样子。




时间: 2024-12-26 23:08:46

《Motion Design for iOS》(二十五)的相关文章

《Motion Design for iOS》(五)

就像之前手环的例子一样,这是另一个在视觉上解释应用数据层级的整体架构的动画.这个动画从一个简单的中心对齐文本菜单开始,当点击My Files的时候,文件夹图标会扩展开来显示那些文件.用户会得到一种菜单就在文件列表背后的感觉,并且觉得他们可以在任何时候点击右下角的菜单按钮回到列表.当点击菜单按钮时,收缩整个文件列表进入之前的文件夹图标然后再次显示菜单. 这是另一个Jakub Autalik设计的非常有趣的动画,之前的里程计东湖也是他创建的.每个界面都使用了多种内置的效果来错开每个视觉元素的显示.歌

CCNA实验二十五 实战多种ACL访问控制  

CCNA实验二十五 实战多种ACL访问控制 环境:Windows XP .Pracket Tracert 5.3 . GNS3.0.7.2 目的:了解ACL作用并熟练在不同环境中配置ACL 说明: ACL是路由器和交换机接口的指令列表,用来控制端口进出的数据包并且可以保护网络,ACL适用于所有的被路由协议,如IP.IPX.AppleTalk等.ACL种类:标准ACL.扩展ACL.命名式ACL.基于时间ACL.自反ACL.动态ACL. 标准的ACL使用 1 ~ 99 以及1300~1999之间的数

攻城狮在路上(叁)Linux(二十五)--- linux内存交换空间(swap)的构建

swap的功能是应付物理内存不足的状况,用硬盘来暂时放置内存中的信息. 对于一般主机,物理内存都差不多够用,所以也就不会用到swap,但是对于服务器而言,当遇到大量网络请求时或许就会用到. 当swap被使用的时候,主机的硬盘灯就会闪烁不停. 本篇介绍两种方式:1.设置一个swap分区   2.创建一个虚拟内存的文件. 一.使用物理分区构建swap: 1.首先是分区: A.fdisk /dev/sda; <== 根据后续提示创建一个分区. B.修改分区的ID,因为fdisk默认将分区的ID作为文件

每日算法之二十五:Divide Two Integers

Divide two integers without using multiplication, division and mod operator. 不使用乘法.除法和求模运算求两个数相除. class Solution { public: long long internalDivide(unsigned long long dividend,unsigned long long divisor) { if(dividend<divisor) return 0; int result =

关于心理的二十五种倾向(查理&amp;#183;芒格)-2

5)避免不一致倾向避免不一致倾向实际上就是人天生就害怕改变.相同是由于人类大脑的生理机制决定的.由于这样的倾向能够带来节省运算空间和能量的优点.这样的抗改变模式的形成,可能的原因例如以下:A) 迅速作出决定对生存来说至关重要,而这样的抗改变模式有助于更快的作出决定;     这里有第四个倾向的因素,对于生存至关重要的反应(遇到生存威胁时),反应一定要快,必须形成固化的模式.这也是我们对于紧急事件的处理常常採用不断反复模拟训练的原因.B) 能够通过群体协作来获得生存优势,假设每一个人总是不停地改变

【管理心得之二十五】组织中的骂名 ----------墙头草

场景再现 ====================== {会议前} 老张:喂,老王.这次的讨论议题你怎么看? 老王:暂时还没有想好,你有什么高见? 老张:这还不简单,以前类似的事发生过. "首先..........其次..........最后........."   你看看怎样? 老王:嗯{点点头} {会议中} 老  张:"方案A 是... ... ... ... " 方案B:"方案B 是... ... ... ... " 方案C:"方

企业搜索引擎开发之连接器connector(二十五)

下面开始具体分析连接器是怎么与连接器实例交互的,这里主要是分析连接器怎么从连接器实例获取数据的(前面文章有涉及基于http协议与连接器的xml格式的交互,连接器对连接器实例的设置都是通过配置文件操作的,具体文件操作尚未详细分析(com.google.enterprise.connector.persist.FileStore类)) 本文以数据库连接器实例为例来分析,数据库类型连接器是通过调用mybatis(sqlmap框架)组件与数据库进行操作的,我们通过前端提交的数据库连接器实例表单信息最终存

二十五、防止表单重复提交

二十五.防止表单重复提交 防止表单重复提交: 有两种方式: 利用重定向<result type = "redirect"/> 使用拦截器 编写jsp页面 <s:form action="regist"> ????????<s:textfield name="name" label="姓名"></s:textfield> ????????<s:token/> ?????

二十五六岁的姑娘

随着时间的推移,我在慢慢的长高,长大,随之而来的责任也越来越重.如果把一个人的一生当做一天来看,那么无疑我已经走过一开始黎明,和初升朝阳的时期了……哪些一切美好希望的寄托已经不再属于我这个年纪该有的了.唯一能做的就是面对现实,到了该吃饭的时间我饿了就是饿了,要吃饭!我感觉我就是处于那个该吃饭时间. 二十五六岁的姑娘应该要有自己的一技之长了,虽然说一切只要想学都还来得及,可是时间不会给你太多准备和努力,只要一眨眼你错过了,那么也许是一辈子的遗憾又或者是那种一切太迟的吃力和无奈! 二十五六岁的姑娘要

Bootstrap &lt;基础二十五&gt;警告(Alerts)

警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个可选的关闭按钮.为了创建一个内联的可取消的警告框,请使用 警告(Alerts) jQuery 插件. 您可以通过创建一个 <div>,并向其添加一个 .alert class 和四个上下文 class(即 .alert-success..alert-info..alert-warning..ale