《Motion Design for iOS》(五)





就像之前手环的例子一样,这是另一个在视觉上解释应用数据层级的整体架构的动画。这个动画从一个简单的中心对齐文本菜单开始,当点击My Files的时候,文件夹图标会扩展开来显示那些文件。用户会得到一种菜单就在文件列表背后的感觉,并且觉得他们可以在任何时候点击右下角的菜单按钮回到列表。当点击菜单按钮时,收缩整个文件列表进入之前的文件夹图标然后再次显示菜单。





这是另一个Jakub Autalik设计的非常有趣的动画,之前的里程计东湖也是他创建的。每个界面都使用了多种内置的效果来错开每个视觉元素的显示。歌曲列表动画进入的方式比起简单地使用iOS导航栏push的动画进入来说是一种非常好看的方式。这个动画的关键不同点在于屏幕不是一次性移动的,界面上每一个独立的元素都在移动。为了达到这种效果,每个元素的开始时间都需要与之前的元素又一些错开,好像它们都被拖进来一样。这种类型的拖动效果会在之后作为编码示例来展示。





这个下拉刷新的骷髅头动画是一个很好的介绍一些古怪而有趣的,容易被忽视并且构建非常简单(而且廉价!)不需要任何复杂动画的界面元素的例子。在下拉手势中发生了一系列事情,首先,组成骷髅头图片的元素会旋转,让它像是在向下旋转一样。然后,有两个默认状态下界面上不可见的动画人物在下拉的时候出现。最后,这些动画人物不是简单的在用户下拉的时候出现,它们的一部分也会在手势过程中旋转和移动。这是一个包含多个不同元素的非常复杂的动画,但是你可以想象用户可能会一次次地下拉界面,因为它实在是太有趣了。这是让他们记住这个app的地方,而在用户的主屏幕上凸现出来是非常重要的。

如果你在寻找其他人创建的非常棒的app动画例子,我高度推荐你浏览CAPPTIVATE.coDribbble里的动画标签。

寻找动画并讨论它们为什么棒是很好的事,但是这不会让我们接近并充分分解它们做了什么从而自己创建惊艳的动画。让我们继续本指南的下一节来学习动画的结构和性能。



版权所有:http://blog.csdn.net/cloudox_

长期致力于iOS英文资料翻译

觉得有帮助的可以打赏支持一下小弟~

时间: 2024-10-06 20:23:21

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

Motion Design for iOS

Book Description Motion Design for iOS is a first-of-its-kind guide that explains how to both design & build wonderful, immersive animations for iOS. Learn about the history of animation and motion, the basic principles of engaging animation design i

《Motion Design for iOS》(二十五)

现在我们已经了解了Core Animation的基础并且使用了优秀的框架JNWSpringAnimation来模仿弹簧系统,是时候来开始写一些真实的示例代码了. 仿制一个iOS AlertView 重现一个熟悉的界面元素是一个很好的熟悉动画开发的方式.首先,让我们创建我们自己的标准iOS警告视图.这是内置的警告视图的样子. 在本指南之前的章节中,我解释了分解一个动画的各个组成部分有多么重要,这样你就可以准确地构建它.仅仅说"警告框动画进入屏幕"是不够的,你需要准确地知道发生了什么.让我

《Motion Design for iOS》(四十五)

我们现在还剩两个动画,但它们比较大,需要一些思考.我们需要将顶部的线顺时针旋转45度(所以右边向下倾斜),然后我们需要底部的线逆时针旋转45度(所以右边向上倾斜).逆时针旋转意味着我们需要旋转一个负值,所以是-45度.当然了,动画不会接受度数值,它们需要角度值,45度在角度上是π/4.来做一些旋转动画. // 旋转顶部的线来构成X POPSpringAnimation *topRotate = [self.top.layer pop_animationForKey:@"topRotate&quo

《Motion Design for iOS》(九)

计划动画 如果把动画比作一个房子,你现在至少已经在熟悉造房子的工具了:锤子.扳手和螺丝刀.你熟悉的动画的工具也就是你在创建一个动画的时候操作的特定属性.但这还不是你考试思考动画和设计动作需要知道的全部. 现在是时候开始布局动画的蓝图了.这是指准确描述动画中每一步将会发生什么的说明.如我之前提到的,你不能在开会的时候仅仅挥舞你的手臂来解释当用户点击一个按钮的时候会发生什么,你需要一个语言来描述和拆分你在想想一个界面元素运动时头脑中发生的事情.在你创建之前,你的下一步应该是思考将其化为细粒度并且写下

《Motion Design for iOS》(三十二)

现在让我们添加我们的图标按钮. // 添加图标 UIButton *icon = [UIButton buttonWithType:UIButtonTypeCustom]; [icon setImage:[UIImage imageNamed:@"map-icon"] forState:UIControlStateNormal]; [icon addTarget:self action:@selector(didTapMapIcon:) forControlEvents:UIContr

《Motion Design for iOS》(四十六(最终章))

所以你应该使用哪个动画框架呢? 我们讨论了iOS7的弹簧动画.JNWSpringAnimation和Facebook的Pop,很自然的你会想知道该使用哪个动画框架.有一个我不是仅仅选一个动画框架并单独专注于它的原因,我想要提供一个大的关于你可以构建动画和iOS原生界面的不同方式的概览. 在我的app中,我倾向于根据不同的目的对三种框架都进行使用.如果我只是非常简单地淡出一个视图,我们直接使用基于block的UIView动画,因为它们的代码很少.如果我在做一个指数延迟类型的动画(缓慢.平稳地移动到

《Motion Design for iOS》(六)

动画属性 回头看看上一节显示的动画,它们是如何从一个空白的画布或白班变成一个复杂.漂亮的动画的?这些动画是怎么产生的?在变化过程中改变的特殊属性是什么?在回忆中摇晃你的手来表明一些物体应该移动或拉伸是不够的:如果你想要动画脱离你的手进入界面,你需要仔细思考在每一步中会发生什么以及哪些值被操作了. 如果你看一下上一节展示的动画GIF图,以及像CAPPTIVATE.co和其他网站展示的多种动画,并且你对发生了什么观察得非常仔细,你就会开始在视觉效果中看出一些模式来.这些模式是设计师和开发者在他们的动

《Motion Design for iOS》(二十七)

是时候添加一些动画了.为了警告框的显示,如我之前所说,我们想要覆盖层从完全透明(不可见)变成半透明.我们还想要添加两个动画到警告框中:将不透明度从0.0动画到1.0,以及将比例从大于1.0动画到1.0.这就是iOS 7的警告框做的事情,所以我们要模仿它. 首先让我们处理两个不透明度的动画(覆盖层和警告框视图),因为不透明度动画一般不需要任何高级的弹簧动作,让我们使用一些简单的基于block的UIView动画. // 淡入灰色的封盖层和警告框视图 [UIView animateWithDurati

《Motion Design for iOS》(十六)

Core Animation是一个动画和图形合成框架,用于提高速度和效率.虽然在名字中有动画的单词,不要让它误导你以为它只能做这个:它实际上负责屏幕上显示的所有视图的整体渲染体系结构,可以非常快速地进行透明度计算.图像过滤和视觉效果.它是为iOS创造的,但从OS X10.5开始,也可以在Mac上应用. 要通过GPU管理渲染在屏幕上的图像内容,Core Animation使用CALayer对象作为主力.CALayer负责界面渲染,实际上,UIView对象只是CALayer的简单封装,而Core A