动画属性

优质
小牛编辑
124浏览
2023-12-01

回头看看上一节显示的动画,它们是如何从一个空白的画布或白班变成一个复杂、漂亮的动画的?这些动画是怎么产生的?在变化过程中改变的特殊属性是什么?在回忆中摇晃你的手来表明一些物体应该移动或拉伸是不够的:如果你想要动画脱离你的手进入界面,你需要仔细思考在每一步中会发生什么以及哪些值被操作了。

如果你看一下上一节展示的动画GIF图,以及像CAPPTIVATE.co和其他网站展示的多种动画,并且你对发生了什么观察得非常仔细,你就会开始在视觉效果中看出一些模式来。这些模式是设计师和开发者在他们的动画中一次又一次改变的特定属性,而且这还不是全部。事实上我认为如果你简单地操作下面三个属性就可以创建一个充满了世界级动画的完整app:

  1. 位置:界面上一个物体的精确的X和Y坐标。
  2. 透明度:一个物体的透明度,从0.0(不可见)到1.0。
  3. 比例:一个物体对比于其原始尺寸的尺寸。1.0的比例意味着物体被设置为其原始大小的高和宽。0.5的比例意味着物体是一半的宽度和高度。0.0的尺寸意味着物体的宽度和高度都是0,但依然存在于界面上一个特定的坐标。2.0的比例意味着物体的高度和宽度是原始的两倍。

这三个属性是人们设计iOS app的动画时三个可动画化的值。你可以通过简单地单独或结合使用这些属性实现惊人数量的好动画。

所以通过位置、透明度和比例这三个属性,你能做什么?怎样做才能操作这些属性来在屏幕上实现?

位置。如果你想要让一个物体在屏幕上移动,你只需要操纵它的位置。将一个向屏幕的下方移动意味着你在增加其Y坐标,因为(X:0, Y:0)在iOS app中表示屏幕的左上角。如果你想要将一个物体从屏幕的底部移动到中央,你首先需要将Y坐标设为比屏幕的垂直分辨率大(道屏幕底部),然后将Y坐标动画移动到一个较小的数值来放置在屏幕的中央。

320*568是iPhone 5屏幕的一倍分辨率。iPhone 6的屏幕是375*667。然而全部真实的像素总数是这个的两倍,但你放置UI对象到屏幕上时不需要考虑这个。

透明度。将一个界面元素从100%不透明改成透明一些意味着你在调整它的透明度,或者alpha值。动画改编一个物体的透明度可能是最常见的属性,这可以在与背景混合到100%不透明地显露在前端之间做一个很好的过渡。而且如果你在缓慢地从屏幕上移除一些东西,动画淡出将其alpha设为0通常不会有错。一般你会看到透明度动画和其他属性的动画同时出现,比如说,将一些东西从屏幕底部移动到屏幕上(位置),同时将其透明度从0.0(透明)动画变成1.0(不透明)。

比例如果你想要让一个物体变大或变小(一次变化两个方向来保持其比例,或一次只变化一个方向),有一个简单的属性可以调整,那就是物体的比例。想要创建一个看起来和iOS 7的警告框视图一样的模态警告框么?那是一个依托于改变比例的视觉效果的很简单的动画。将比例初始设为大概1.3倍(比原始尺寸要大),然后将其动画变为1.0倍(原始尺寸),同时改变透明度(从0开始变成1.0),这就是它的全部。

现在我们已经描述了在设计动画是经常用到的三个属性,让我们回到之前我展示的动画例子并精确地拆分它们哪里用了位置、透明度和比例动画来创建它们的视觉效果。

在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中的捏交互