译者导语：

    所谓智能手表，就是内置智能操作系统、通过连接网络来实现多种功能的手表产品，智能手表一般能同步手机中的电话、短信、邮件、照片、音乐等。2014年智能手表大有排山倒海之势，三星、LG和摩托罗拉纷纷发布自己生产的智能手表，苹果公司当然也不甘示弱于2014年9月发布了自己的第一款智能手表-Apple Watch。令动画界人士最为好奇的当然就是苹果手表上面的动画啦！（因gif图片上传问题，部分图片无法上传请至原文查看）

原文地址：https://medium.com/@ShopMyApp/anatomy-of-apple-watch-animations-8866e57ada78

译文如下：

    自从看完Apple Watch之后，我们惊讶的发现原来苹果动画也是很注重用户体验的。不过，这也是合乎情理的，可能是为了减少硬件读取和电池消耗，UI本身是极简风格并且图形元素很少。因此，动画和过渡就把用户体验提升到一个水平，让Apple Watch和以往的电子表有所区分。这不仅仅是几个标准的动画，当你进行某些操作屏幕会有相关响应。这就意味着它把大量的精力放在了交互设计上面。

除非我们可以完全复制他们的Shopmyapp，否则我们不能研究其中采取了多么复杂的方案。因此我们查看了主题视频中的所有动画并且详细研究了一些帧。官方宣称，最终代表性的动画将在2015年发布出来。

下面分析各操作过程中的动画：

打开和关闭App

打开App的动画看起来是遵循着IOS7的放大缩小模式，而这次在圆形图标完美切换到App窗口的过程有一个淡入淡出的过渡效果。不仅如此，除了缩小到正常的App大小，他们会进一步分裂，就像星球大战的超光速效应（“App银河”双关语）。

尚未清楚的是你打开的App如果不是处于中间位置会是怎样？它是否会先移动到中间位置再放大？又或者放大的仍是原来中间的图标？

关闭一个App的动画运行方向和打开App是相反的，即APP的窗口缩放的同时淡出，而APP周围邻域变焦且移动接近。

接听电话

     接听电话里面的动画是很简单的，但是仍旧也有许多部件移动的动画：绿色接听按键的缩小，静音按钮放大，音量控制键出现，呼叫的字幕变成通话时间字幕，底层的圆角矩形像抽屉一样划出。重要的是没有任何俩个部件的动画是一样的，每个部件都有它们自己的变化方式。

回复短信

    当时钟界面以缩小且模糊的方式退出时，回复短信的动画就开始了。一个带着人名的短信图标从底部滑入并且轻微的反弹。这可能是在接受到Richard的短信时触发的一个通知。片刻后，图标向上滑动且缩小，文本逐步消失着滑出，短信正文从底部滑入。

   下一阶段开始是从用户点击回复按钮，对话框的放大和轻微的淡出都是触摸的响应。请注意，没有“回弹”，即回复按钮不会缩放为普通状态。然后当前页面放大，同时钟表界面和下一个含操作选项的界面一起循环缩放且模糊。

    理论上来说这是相当复杂的，这就意味着当你看到短信并且迅速进行操作时，有一个钟表界面会在背景上徘徊。也许第一部分只是通知,选项页部分才是实际APP打开的效果。这样的例子很有趣不是？

查看日历

    打开今天的日历表的动画是很简单，类似于Android默认的页面转换。指示当天日期的方形图标放大又缩小，像是反弹回来一样的。然后原先的日历往左边移动，新的一个页面无滑动效果的淡入，当前的时间停留在固定的地方如同不是页面内容的一部分一样。目前不清楚的是，如果你点击的不是今天的日期，而是一个没有红色方形图标的日期，那么会发生什么呢？是否会有触摸响应动画呢？

删除邮件

    删除一条邮件的动画大概是从一个横向滑动显示上下文菜单开始的。点击删除的图标后，删除图标变小变成一个更亮的颜色，然后恢复正常。这可能与常规的点击推开的动画效果不一致，但也许让一个颜色已经暗淡的图标消失不太好。在这个邮件项目划回原位，当它滑动时其余邮件也随之滑动。也许这将是标准的列表的行为。

有关健康的APP的选择

     在健康APP上面选择跑步功能有俩个阶段的，开始是从一个跑步按钮缩小和白色闪光作为触摸点击的响应。同时，标题和其他按钮以级联方式清除屏幕的方式逐渐消失。然后跑步按钮向下滑动变化成一个开始按钮，而其他项目消失在一个序列。同时，数字滑动到屏幕中间在一些无形的边界下面。

结论

    从我们目前所能看到的来看， 主要的结论是有关过渡动画的使用。当图形元素没有变化时，直接切换是通过一些滑动、淡出淡入和放大缩小。可以说，目前的风格几乎是折衷的，即每个动画设计是在特定的时间、空间和背景之下的，试图让大多数元素一起活动，即重点是前后关系，尝试通过优化每一个屏幕和互动的最佳方式去克服有限的空间，在有限的空间里取得一致性成本。如果我们把这些动画同Android的相比，它有一个非常不同的地方在于，在执行相同的任务上提供更多的屏幕和触摸操作，通过相同的准则尝试去建立熟悉的互动。

  一些细节：

• .  点击触摸的响应是完全不同的，通常物体放大出来是有点像被压下来似的，但是在下一个过渡之前它恢复正常，有些淡出也有些不淡出。

• . 动画在目的上面是非常不统一的，即在屏幕上不同的项目有不同的动画。

• . 对称性不是一个大因素，即经常新项目进入的方式和之前它退出的方式是不同的，但是仍然有些项目是通过淡出来交换的。

• . 右上角的时间似乎是静止的，即大部分屏幕上面有相同的地方，但也不是100%绝对的。这里面的规则不是很明显。

• . 导航的规则不是很严格。即二级导航页面在不同的案例里面是不同的。当屏幕底部有显示几个小点的时候，你可以通过左右滑动来切换导航。左上角有时被用作返回键，但也不是绝对规定。

• . 加速大多数情况下都是平滑的正弦曲线，一般应用在溢出或反弹效果上，有时也应用在滑动和缩放上来增加能量感。急剧的加速、指数曲线和三次方曲线的减速似乎都不存在。

总之，Apple Watch的APP打破了很多新的规则，也有可能会接受一些新的挑战。在过渡动画上面的突破是如此强大的，不能被忽视。当然这更像是刚刚起步，因为一个仅有基本的滑动和淡出淡入方案的APP还很不协调。你必须比行业中的其他人更有经验的多。就像做一个基本的装潢，你不能随意的去做，你需要让它的格调更为的高雅。可能很多迭代和原型将需要拿出一个适合整体的方案来。

Apple一如既往的接受了很高的挑战，一方面，他们不能让以往做APP的经验在Apple Watch上看起来是混乱的。另一方面，他们需要一些很棒的APP来创造一个完美的Apple Watch。据说苹果并真的不需要有50000个推特客户的10000个app和一些令人厌烦的app,而是需要1000个好的独特创新的使用案例。因此我预测根据一些良好用户体验和过渡动画的基本准则，Apple Watch 将会有比iOS更高的拒绝率。当然这些都不是确定的，我们必须等待几个月来看看实际的情况和官方的开发指南。

如果你想知道我们是如果仅使用ShopMyApp和Photoshop就能复制这些过渡动画而无需使用代码，去http://shopmyapp.com/samples.html下载psd源文件。