UI动画开发，案例研究：Toonie

实际案例研究显示了Toonie Alarm的UI动画开发，并揭示了Tubik iOS开发人员如何创建复杂的动画交互的过程。

在大多数情况下，当用户在界面中处理动画时，它会花费很短的时间，感觉就像呼吸一样自然。远离设计和开发例程，几乎无法想象这些简短而简单的交互需要花费大量时间进行的工作，呈现出科学与艺术的融合。

在之前的文章中，我们有很多机会向您展示多样化 UI动画解决用户的问题并增强可用性的方法仍然主要是从设计角度提出的。今天的案例研究将在iOS移动应用程序的设计与开发之间建立联系：它将向您展示UI设计师，动作设计师和iOS开发人员在动画方面的协作。

时间选择器动画

天气预警应用程序中的时间选择器实际上是与应用程序交互的核心部分，并且是运动设计和开发在建立可用性和视觉和谐方面起着至关重要作用的主要元素。让我们看看科学，计算和代码如何能够转变为美丽和风格。

动画的所有内容都放在自定义子类UIView上，在这种情况下，我们将其称为AnimatedDayView。

最底层是Infinite UIScrollView（在上面的方案中为1）。它是无尽的滚动视图，其中包含下面图像的副本。

无限滚动的实现方式有很多。滚动视图中替换的主要思想是重新计算滚动视图的大小，并替换显示新图像的不可见的先前图像，并为将来添加该图像。

如果是动画时间选择器 ，我们的起点是上午6点，因此中点是下午6点，终点是第二天的早上6点。

下一层

是Stars UIImageView（2）。此UIImageView被添加到滚动视图上并绕其中心移动；在此过程中，将更改图层的Alpha。这意味着在白天它是透明的，而在晚上它逐渐出现。

下一层是用于太阳和月亮的CALayer，即SunMoonBackgroundLayer。在方案中看不到它，因为它的大小与AnimatedDayView相同。它也绕其中心旋转，该中心在屏幕的可见框下方（5）。

在SunMoonBackgroundLayer上，还有另外两层–分别是月亮（3）和太阳（4）。月亮层与SunMoonBackgroundLayer旋转的角度相同，但方向相反。太阳旋转到更高的弧度。

这里非常重要的问题是要彻底计算每层应该旋转多少度以及滚动应该进行多远。滚动显示最简单的部分。输入变量始终是时间，即用户在UIDatePicker上选择的小时和分钟。有了这些数据，计算滚动视图的移动就非常简单。最初，它将为零，在我们的情况下，它等于上述设置的上午6点的时间。想象一下，用户选择的时间是9.10 AM。当我们计算以分钟（190分钟）为单位的时间差并将其转换为像素时，我们可以理解视图必须上下移动多少个像素。所有滚动场都显示24小时，因此其高度显示24小时，因此1分钟= image_height / minutes_per_day（60 * 24）。知道1分钟的值后，不难计算出190分钟内设置了多少像素。剩下要做的就是将滚动移动到所需的像素数上，如果新时间小于以前的设置，则滚动数也可以为负数。

下一个重要参数是星星的Alpha。可以通过了解我们在背景图像上当前位置处的哪个特定位置进行计算。这意味着在图像顶部的上午6点，由于早晨开始，星星应具有Alpha 0值。并且忽略星星，也就是保持在Alpha 0中，直到下午6点，然后应逐渐增加Alpha值，以使Alpha在午夜达到1。根据所需的视觉效果，此处的动力学和强度计算可能会有所不同。核心是我们拥有可以依靠的基本参数：背景图像上的当前位置。并且可以在知道用户设置的时间的情况下轻松计算。通过更改Alpha运动，可以有效地获得吸引人的视觉效果。

要计算旋转角度，我们需要360度旋转24小时。因此，0度= 6 AM。我们以分钟为单位计算差异，找到每分钟的度数并设置换档所需的度数。

动画的另一个元素是云。它们的出现是由于NSTimer。它添加了一种用于云的图形变体之一（该应用程序使用三个图形版本），其Alpha（透明度）的随机坐标超出了右侧屏幕的限制。之后，从右到左开始移动动画（改变中心）。计时器以随机间隔启动。动画完成后，云消失了。

太阳开关

另一个需要注意和创造力的动画是“警报”屏幕上的开关，交互的实际元素显示警报已设置且未激活。支持应用程序总体视觉性能的设计解决方案是，当警报处于活动位置时，使切换开关看起来像动画的太阳。

通过代码查看呈现的动作的完成情况，我们看到这是UIView，其中包含几层。

第一层是具有矩形形状的开关（1）中孔的背景。在它的上方，有一个圆圈–开关（2）的拨动开关，它是太阳的中心。它可以向左或向右移动。另一层是阳光（3）。之所以将它们设置为单独的图层，是因为它们具有无限的旋转动画。

当开关关闭时，光线的Alpha值更改为0，并且动画停止。在所有提到的层上，放置了最大的层，它是开关（4）的背景。这也是矩形图层，其具有使用两个UIBezierPaths绘制的遮罩CAShapeLayer。

遮罩将切掉所需形状的图层，并切换到最终视图。为了进行交互式控制，添加了两个手势识别器：用于推动的UITapGestureRecognizer和用于拉动切换的UIPanGestureRecognized。

该实际案例表明，制作动画以实现其解决问题的潜力的吸引力和自然性是一项艰巨的任务，需要体贴入微的方法以及设计师和开发人员为用户着想的合作。

关注我们更多好文