Motion Design for iOS(译文 2)
Animation Properties(译文)2
回顾上一部分所阐述的内容，如何从一个空白的画布实现一个漂亮的动画？这些动画效果是如何实现的？这些独特的属性和特征是如何从一个值变化到另外一个值？如果你想实现你脑海中的动画效果，你需要考虑在动画实施的过程中究竟发生了些什么，有哪些属性是被操纵着的。
- 位置 屏幕上控件的X 和Y 坐标的改变
- 透明度 屏幕上控件的透明度（从0.0 ~ 1.0）的变化
- 缩放比例 控件相对于原始尺寸的大小。1.0 意味着控件是原始的宽高，0.5意味着控件的宽高只有原来的一半，0.0则意味着控件的宽度和高度都为0，但是不是说这个控件不存在，它仍然存在在当前坐标系里。2.0则意味着控件当前的比例是原始比例的2倍。
以上这3个属性是用户在设计iOS APP的时候主要调整的几个属性值。你可以通过改变这几个属性的值或者是交叉使用来达到意想不到的动画效果。
那么，拿位置、透明度、缩放比例这三个属性能做些什么呢？操纵这些数据又能在屏幕上实现什么效果呢？
位置——position
如果你想移动一个控件，就可以通过操纵他的position位置来实现这个效果。将一个控件向下移动意味着你在增加它自身的Y坐标值，因为坐标系的原点位于APP的左上角。如果你想将一个控件从屏幕底部移动到屏幕的中央位置，应该首先将控件的Y坐标值设置为比屏幕Y轴最大坐标值大的一个值，然后将Y值通过动画变为屏幕中间位置。
2.1.png
透明度
将控件的透明度从100%不透明——>一定的透明度，可以通过改变opaque或者是alpha属性来改变。这一属性可以很好的实现控件从跟背景很好的融合到完全凸显的一个状态的改变。如果你缓慢的将一个控件从屏幕上移除的话，控件的透明度会突然变到0.一般的会将透明度的变化动画和其它的属性一起使用来达到预期效果，例如：将一个控件从屏幕之外移动到屏幕中（position），并同时将透明度从0.0（透明）到（不透明）进行转换。
2.2.png
缩放比例
如果你想将一个控件变得更大或者更小（可以是两个维度的成比例的变化，也可以是在某个维度上的缩放变化），可以通过操纵控件的scale属性来达到这个效果。想创建一个模态的像iOS7原生的alertView一样的alert？只需要改变它的视觉比例，首先需要设置他的比例为1.3x（要比原始尺寸大），然后将比例变到1.0x（原始尺寸）并且透明度从0——>1.0，这样就可以实现。
2.3.png
既然我们已经介绍过在实际动画创作过程中应用广泛的属性，接下来我们就来实现一些案例效果。
在Jeff的地图动画效果中同时使用了位置、透明度和缩放比例这几个属性。
- 最底层的界面缓慢的缩放并且降低了透明度，所以它才能够很平滑的缩放到底层。
- 底涂层是从一个大于原始尺寸的比例以及一个0.0的opacity开始的，然后才变为原始尺寸并且将不透明度上升到1.0.并且位置上网上走了。
虽然这位置、透明度和缩放比例可以带给你一些比较好的动画效果，但在做动画效果的时候仍然可以同时使用其他的一些可以做动画的属性。在这里我们介绍一些在动画效果中经常使用的其它几个动画属性。
-
颜色 你可以像CSS动画一样，实现颜色从一个值变换到另外一个值。而这个颜色则可以是字体、背景色或者是界面上的一个层。你可以在点击或者是在一个新的界面出现的时候实现颜色改变的效果。
-
旋转 界面中的控件可以从0360°之间的任意角度开始，然后最后回到0°。旋转的角度通常是用弧度制来表示（02π），轻微的旋转可以让平淡的界面变得更加新引人，尤其是当你同时应用弹簧效果的时候。
-
3D 对界面上的控件实现3D动画效果，也就是说控件是在三维角度进行运动，不是背向用户运动就是朝向用户旋转运动。而旋转角度也会像2D动画一样通过弧度制来进行表示。
构建动画
打比方说，动画是一座房子，那么你至少需要了解建造房屋的斧子、扳手等其他工具，你对动画的元素和工具很熟悉，也就是那些你想要拿来构建动画效果的属性。但是，知道这些并不足以使你创造出好的动画效果出来。
现在我们应该规划一下如何实现一个动画效果。
- Item最初的属性是什么？是仅仅位于屏幕之后么？是完全透明的么？是不是缩放大一个极其微小的尺寸？很大么？
- Item的最终状态的属性是怎样？现在是处于屏幕的中央么？是完全可见的么？已经旋转到一定角度了吗额？现在是否有一个不同的背景色了呢
- 这个动画效果需要持续多长时间。
- 动画发生的时候Item会产生什么样的变化？通常会有多个Item发生动画效果，一个紧接着另外一个。
对动画思路的思考和整理是一件很重要的事情。首先，这样可以让你将自己抽象画的动画效果形象的描述给其他人；然后，这样也可以使你意识到思路中的一些尚未解决问题；例如：Item2和Item1是否要同时开始动画效果啊，或者是是否要有一个缓慢的动画开始时间等之类的问题
也许你现在没有答案，但是只要你开始整理思路，这些答案就会慢慢出现。
时间意味着一切
忘了介绍一个重要的关键因素，一个在实现一些漂亮而且自然的动画的时候，一个很容易迷惑的问题，时间。动作发生和动画开始这个中间的时间。持续一个动画所花费的时间。一个动画发生到下一个动画切入中间的时间。
而且，动画的本质就是动画着的Item的属性随着时间在不停的发生改变。
最好的抓取动画的各个时间的状态以及带来的属性随时间的改变的最好的办法就是像下面的这张图一样。
2.4.png
这个表格代表了一个动画类型。Y轴代表的是发生动画的属性，在这里我们代表的是Item的缩放比例。在这个案例当中，我们的动画开始从0.0（不可见）到1.0（Item的最原始的比例）；
水平坐标轴则表示的是从动画开始到结束的时间。绿色的线就表示在各个特定的时间当前Item的属性所在的一个状态。就像你看到的，这个线基本上是直的，也就是说属性的改变比率是一样的。这个例子当中，Item是在1秒钟的时间内，缩放比例线性的从0.0~1.0的。这就是所谓的线性动画.
Ease
2.5.png
Y轴表示的是需要进行动画的属性值，例如是一个Item的尺寸和位置变化。Y轴的底部的数值表示的是动画开始时候的初始值。而Y轴的最大值则表示的是动画结束的时候的属性的状态值。X轴表示的是这个动画总的持续的时间。而那条线则表示的是动画效果的各个阶段属性值的变化。
2.6.png
