watchOS 2:动画的力量

144
作者 星夜暮晨
2015.08.07 18:01 字数 2714

原文 watchOS 2: The Power of Animations

原文作者 Lukas Petr

译者及改编 星夜暮晨(QQ:412027805)

2015年8月7日


在几周前的WWDC 2015苹果开发者大会上,推出了Apple Watch的全新操作系统——watchOS 2。这个新系统进行了许多改进,尤其是对开发者而言,创建一个Apple Watch应用变得更简单了。以下几点是我觉得最值得开发者关注的新特性:

  • WatchKit应用如今能够直接依赖手表本身的硬件而运行,这项功能将带来运行速度上的极大提升,提高用户体验。

  • 全新的Watch Connectivity 框架将允许iOS应用与对应的watchOS应用之间互相进行通讯,以及共享各种各样的数据。

  • watchOS 2应用能够访问硬件数据了,比如说运动感应器、录音,甚至还能够读取心跳速率。

  • watchOS 2还引进了动画。在watchOS 1当中,唯一能够展示动画的操作只有使用轮播图片的方式。watchOS 2将带来“真正的”动画,您能够通过改变动画闭包中的布局属性,达成给用户界面添加动画的效果。这也是本教程的主要内容。

为什么要关注动画呢?

在详细讲解之前,我想花一点点时间来说明一下Apple Watch应用允许动画的涵义和目的。

显然,最直接的原因在于,如果能够恰当使用动画效果的话,那么会让用户界面显得更加生动、自然。对于Apple Watch来说,恰当使用变得更为重要。因为绝大多数的操作都只持续个那么几秒钟,一定要克制住自己疯狂使用动画的冲动。

接着是我认为最为重要的一点,就是Apple Watch应用中允许自定义导航的目录层级结构。试想,您想显示一个特殊的界面,这个界面只有在用户执行了特定操作后才会消失。通常情况下,当显示的是一个modal界面控制器的时候,Apple Watch应用会在左上角显示一个“取消”按钮。通过动画和一些精巧的布局,我们可以伪造一个特殊的“视图控制器”来让界面全屏显示,从而让用户只能通过特定操作才能退出。这也是本教程的教学内容之一。

开始之前

在学习本教程之前,请先确保您对WatchKit上的布局系统有一定了解。即使您是一名资深的iOS开发者,但是WatchKit特有的“基于组(Group-based)”的布局方式和iOS上的布局方式大大的不同。我们需要以另外的方式来使用这些布局,不过习惯之后,您就可以轻松创建绝大多数布局了。

我的朋友Patrick Balestra在Tuts+上写了一篇教程Understanding the WatchKit Layout system,如果您对WatchKit上的布局方式还很生疏的话,那么推荐大家一读。他通过一个示例应用,给大家展示了您应该知道的布局原理。

此外,有许多WWDC课程涉及到了本篇教程提及的知识。其中有一篇我最喜爱的教程,名为Layout and Animation Techniques for WatchKit,它几乎讲解了所有WatchKit上可用的动画。

基础知识

WatchOS2的动画原理十分简单,我们只需在动画闭包(animation block)中添加动画属性(animation properties)即可。比如说:

[self animateWithDuration:0.5 animations:^{
    [self.circleGroup setHorizontalAlignment:WKInterfaceObjectHorizontalAlignmentRight];
}];

该方法将会让circleGroup伴随着一个持续0.5秒的动画,实现右对齐的显示效果。正如您所见,我们调用了self(WKInterfaceController的实例对象)的animateWithDuration:animations方法。和iOS不同,iOS使用的UIView上的动画方法是类方法。

下面列出了能够实现动画化的属性:

  • 透明度
  • 对齐方式
  • 宽高
  • 背景颜色
  • 颜色和着色(tint color)

一定要牢记在watchOS 2当中,我们仍然不能够在运行时动态创建用户界面元素。但是我们仍可以在故事板中将它们隐藏或者设置透明度为0,这并不影响最终的审核。

好了,联系WatchKit布局系统的相关知识,您现在就可以开始在watchOS上绘制原生动画了。我们首先创建一个简单的应用,这样我才能给您展示如何将这些例子组合在一起。

基础动画

我们现在将创建一个简单的watchOS 2应用,然后给大家介绍一些观念。我不可能将所有东西给大家完完全全讲出来,我只会将一些最基本的思路,然后讲解一些动画效果该如何实现。

步骤1:创建项目

本文撰写的过程中,Xcode 7还处于beta版本。要创建watchOS 2的应用,您必须使用Xcode 7。

  • 启动Xcode,然后选择File > New > Project...
  • 选择iOS Application中的Single View Application模板,然后单击Next
  • Product Name框中输入WatchAnimations,您可以取消选择Include Unit TestsInclude UI Tests选项,因为本教程中这两货没卵用。

  • 单击Next,选择保存该项目的一个路径,然后单击Create

步骤2:添加WatchKit对象

  • 在Xcode中,选择File > New > Target...
  • 在模板列表中,选择watchOS > Application中的WatchKit App模板,然后选择Next

  • Product Name框中输入您想要的名字,这里我将其命名为WatchApp
  • 取消Include Notification Scene选项,因为我们不需要使用它。当我们点击Finish后,WatchKit对象就创建完毕了。

  • 如果提示要激活WatchApp编译方案的话,请单击Activate激活。注意,您可以在任何时候修改Xcode窗口左上角的编译方案。

步骤3:创建用户界面

打开WatchApp组中的Interface.storyboard,如下图所示。


通过拖曳右边的Object Library中的控件,我们将一个组(Group)添加到界面上。在右边的Attributes Inspector中,将其布局更改为Vertical,然后将其高度设置为Relative to Container


向我们刚刚添加的组中再添加一个组。然后再其Attributes Inspector中,设置其竖直位置(Vertical Positon)为Bottom

然后向第二个组中添加4个按钮,每个按钮都设置其SizeRelative to Container,值设置为0.25。依次给这些按钮设置标题,设置为←、→、↑和↓。做完此步骤后,现在的用户界面应当如下图所示:


要完成用户界面的第一部分,向基组(main group)上再添加一个组,然后按照下列步骤进行配置:

  • 对于透明度来说,通过左边的Document Outline将其名字设置为Circle
  • 将颜色设置为红色。
  • 将半径设置为20px。
  • 将其高和宽都设置为40px。

下图显示了这个圆圈的配置结果。


步骤4:添加动画

Project navigator中,展开WatchApp Extension组,然后选中InterfaceController.m文件。将InterfaceController类替换为如下代码:

#import "InterfaceController.h"

@interface InterfaceController()

@property (nonatomic, weak) IBOutlet WKInterfaceGroup *circleGroup;

@end

@implementation InterfaceController

// Circle Direction buttons

- (IBAction)leftButtonPressed {
    [self animateWithDuration:0.5 animations:^{
        [self.circleGroup setHorizontalAlignment:WKInterfaceObjectHorizontalAlignmentLeft];
    }];
}

- (IBAction)rightButtonPressed {
    [self animateWithDuration:0.5 animations:^{
        [self.circleGroup setHorizontalAlignment:WKInterfaceObjectHorizontalAlignmentRight];
    }];
}

- (IBAction)upButtonPressed {
    [self animateWithDuration:0.5 animations:^{
        [self.circleGroup setVerticalAlignment:WKInterfaceObjectVerticalAlignmentTop];
    }];
}

- (IBAction)downButtonPressed {
    [self animateWithDuration:0.5 animations:^{
        [self.circleGroup setVerticalAlignment:WKInterfaceObjectVerticalAlignmentBottom];
    }];
}

@end

这些操作会让一个红色圆圈以一个特定的方向移动,就如您所看到的,我们在动画闭包中完成了其动态对齐的效果。

步骤5:连接输出口(Outlets)

打开Interface.storyboard,然后如下图所示连接输出口。


然后运行这个项目,如果您完成了以上步骤,那么您就应当可以通过下面的按钮来控制小圆圈的运动了。


更为复杂的动画

在本教程的第二部分,我们会创建一个推出动画。和上面的步骤类似,我们这次加快一点脚步:

步骤1:创建动画

打开InterfaceController,然后创建一个新的输出口:firstScreenGroup。它是InterfaceController类中类扩展的WKInterfaceGroup类型。

@interface InterfaceController()

@property (nonatomic, weak) IBOutlet WKInterfaceGroup *circleGroup;
@property (nonatomic, weak) IBOutlet WKInterfaceGroup *firstScreenGroup;

@end

接下来,在InterfaceController类中实现以下动作:

- (IBAction)pushButtonPressed {
    [self animateWithDuration:0.1 animations:^{
        [self.firstScreenGroup setAlpha:0];
    }];

    [self animateWithDuration:0.3 animations:^{
        [self.firstScreenGroup setWidth:0];
    }];
}

- (IBAction)popButtonPressed {
    [self animateWithDuration:0.3 animations:^{
        [self.firstScreenGroup setRelativeWidth:1 withAdjustment:0];
    }];

    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self animateWithDuration:0.1 animations:^{
            [self.firstScreenGroup setAlpha:1];
        }];
    });
}

pushButtonPressed方法中,我们将第一个屏幕组进行了收缩(在下一步我们会实现它),然后在popButtonPressed方法中我们又展开了这个组。我们同时也通过动态改变透明度的值,让动画更加吸引人一点。

步骤2:扩展用户界面

打开Interface.storyboard,然后向用户界面中添加一个新的组。将这个组放到和Circle同级的层级上,然后将所有按钮放进这个组当中。将上面这个组的Layout设置为Horizontal,然后将其重命名为First screen。如下图所示,这会让我们的操作更简便:


接下来,再添加一个组,让其层级和First screen组相同。将其Layout属性设置为Vertical。然后向这个组上添加一个图片和按钮,您可以放入任何图片,不过一定要确保您在那里放了东西,否则动画会显得比较死板。将这个按钮的标题命名为“< Pop”。将这个按钮和我们先前创建的popButtonPressed动作相关联。到现在为止,用户界面应该变成这样子了:


First screen组中添加一个按钮,将其标题设置为“Push >”,并更改其竖直位置为Bottom。将该按钮和pushButtonPressed动作相关联,用户界面如下图所示:


还有一件事情要做,就是将firstScreenGroup输出口和我们命名为First screen的组相关联。


步骤3:编译并运行

当您编译并成功运行该应用,您应当可以通过按下底部的“Push >"按钮来展示第二个屏幕界面。然后通过单击第二个界面上的“< Pop”按钮来回到第一个界面上面。如下所示:


结论

在本教程中,我们对watchOS 2上的原生动画进行了一次简单的浏览。我希望这能让您能体会到在watchOS上实现动画的快感。如果您有任何疑问,您可以在本文下方留下评论,或者在Twitter上与我联系

 技术文档翻译