《Motion Design for iOS》(八)



在Jeff的地图动画中,他同时使用了所有位置、透明度和比例动画的组合。

  • 初始的面板稍微缩小并且透明度降低,所以它很好地淡出到应用的背景中去了。
  • 地图面板从一个比1.0倍稍微大一点的比例(可能是1.1倍之类的)以及0.0的透明度开始。然后动画减小到1.0倍以及1.0的透明度。它还有一个轻微的位置动画来上移一些像素。




记得这个手表的界面和它光滑的动作么?真的没有什么秘诀,这个动画设计唯一的属性就是元素的位置。没有比例或者透明度的调节,元素仅仅是在屏幕上通过改变他们的位置来移入移出。每个动画的开始时间会比前一个元素稍微错开一点来给出一种“拖拽”的感觉,但是唯一用到动画里的就只有位置。

动画一个元素的位置、透明度和比例可以让你走的很远,但当然也有其他你可以在动画中操作的属性。这里是三个在更高级的动画中经常用到的元素属性。

颜色。就如CSS动画中一样,你可以在两个值之间过渡颜色。这可以是你界面中一些文本的颜色或形状和面板的背景色。你可以在一次点击或者介绍一个新界面给用户的时候过渡颜色。或者可以在用户首次体验一个滑动的时候在颜色之间缓慢地切换。





旋转。你界面中的物体可以旋转,从初始的0度到360度的旋转状态到360度的整体旋转并回到0度。当你在代码中创建动画的时候旋转通常使用弧度来表示(0到2π)。轻微的旋转动画可以增加非常灵巧有趣的元素到原本平凡的动作中去,尤其是和之后会讨论的跳跃动画曲线组合的时候。





3D。在你的界面中以3D的方式变化一个物体意味着在第三个方向上操作它,并且当你在动画中使用3D的时候,通常要么是3D旋转回屏幕,要么是旋转向用户。这个旋转的数量也是像2D平面旋转一样用弧度来表示的,但3D动画的另一个关键因素是你想使用多少透视程度。通过改变透视值,你可以有限地描述元素会被放置在视觉上离屏幕前端多远的地方。这取决于3D变化过程中变形的数值。





一个精细的3D效果的例子是Clear中捏的动画。这个视觉效果是任务条目行视觉上折了一半,其中每一半都向屏幕里面旋转(在3D空间上)。旋转的数值和行的上下两半的位置都被仔细的控制,所以在中间没有缝隙去影响效果。还有,为了让它看上去确实像一个三维物体,要让行的上半部分比下半部分暗来显示一个阴影。这类似于Paper中的弹起动画:新闻在打开的时候使用了一个3D变化来旋转向用户。



Clear中的捏交互



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

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

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

时间: 2024-10-16 13:51:58

《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》(三十八)

我在我自己的iPhone app Interesting中也使用了波浪形的动画.来看看我的app的动画并构建它. 动画Interesting的Stories Into Position 当我的新闻app Interesting首次打开时,我会发起一个网络请求来拉取最近的文章.当请求返回时,我需要用UITableView来放置文章数据,每行一篇文章.一些app选择在数据返回时淡入列表,一些会将行一行行地滑动到位置上,而其他的则立即显示行,没有任何动画.我选择使用一个内置的类似我们刚刚构建的音乐播放

《Motion Design for iOS》(十八)

从iOS 7中的弹簧动画开始 从iOS 7开始,苹果在他现有的一套动画方法中添加了类弹簧的动画能力.实际上,他们还添加了很多东西:他们的UIKit Dynamics 框架是一个整合到了UIKit中的完整的物理引擎,允许你添加地心引力.弹簧附着.动力等到你的界面元素中. 让我们看看一个iOS 7中介绍的更改了的基于block的动画方法,它现在增加了一些额外的参数来实现类弹簧动画.这个是我们动画代码的更改. UIView *redBall = [[UIView alloc] initWithFram

《Motion Design for iOS》(二十五)

现在我们已经了解了Core Animation的基础并且使用了优秀的框架JNWSpringAnimation来模仿弹簧系统,是时候来开始写一些真实的示例代码了. 仿制一个iOS AlertView 重现一个熟悉的界面元素是一个很好的熟悉动画开发的方式.首先,让我们创建我们自己的标准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