CoreAnimations are great and it can be used upon the layers of your views, to provide a smooth animation to views and it’s subviews and it helps in beautifying you app and also it provides a consistent user experience. Here’s a definition of CoreAnimation from the Apple Developer Docs —

CoreAnimations很棒，它可以在视图的各个图层上使用，以为视图及其子视图提供平滑的动画，并有助于美化您的应用程序，还可以提供一致的用户体验。 这是Apple Developer Docs中CoreAnimation的定义-

Core Animation provides high frame rates and smooth animations without burdening the CPU and slowing down your app. Most of the work required to draw each frame of an animation is done for you. All you have to do is configure a few animation parameters (such as the start and end points) and tell Core Animation to start. Core Animation does the rest

Core Animation可提供高帧频和流畅的动画，而不会给CPU造成负担，也不会降低应用程序的运行速度。 绘制动画的每一帧所需的大部分工作已为您完成。 您所要做的就是配置一些动画参数(例如起点和终点)，并告诉Core Animation开始。 剩下的就是核心动画

I’ve started using them recently and let me tell you one thing, it’s pretty awesome. I was reluctant at first thinking it wasn’t easy, and it would require a lot of time to learn before I start using it, but I was wrong, once I started learning and applying the concepts I was able to grasp it relatively quickly.

我最近开始使用它们，让我告诉您一件事，它很棒。 刚开始我不情愿认为这并不容易，并且在开始使用它之前需要花费很多时间来学习，但是我错了，一旦我开始学习和应用这些概念，便能够相对较快地掌握它。

Note — This tutorial is based on UIKit, if you use SwiftUI you can still go through it, but it has a different way of accomplishing it.

注—本教程基于UIKit，如果您使用SwiftUI，您仍然可以遍历它，但是它有完成它的另一种方法。

Alright, let’s look at how we can use CoreAnimations, CAShapeLayers to create a visual stopwatch.

好了，让我们看看如何使用CoreAnimations，CAShapeLayers创建可视的秒表。

先决条件 (Prerequisites)

You don’t need to have in-depth knowledge of iOS app development, so feel free to follow along! All you need is a MacBook, Xcode, and some knowledge of Auto Layouts.

您不需要对iOS应用程序开发有深入的了解，请随时关注！ 您只需要一台MacBook，Xcode和一些有关自动布局的知识。

介绍 (Introduction)

A little introduction to the stopwatch we are going to create.

我们将要创建的秒表的一些简介。

We are going to use 3 CAShapeLayers for the stopwatch and we’ll be animating it with CoreAnimation.

我们将使用3个CAShapeLayers来制作秒表，并使用CoreAnimation对其进行动画处理。

• Track Layer — It’s the outer layer with a gray circle that displays the empty track.

  轨道层 —这是带有灰色圆圈的外层，显示空轨道。

• Circle Fill Layer — It’s the layer that gets filled as the time progresses.

  圆形填充层 -随着时间的推移，该层将被填充。

• Round Layer — It’s the layer which shows the current position of the circle fill layer

  圆形图层 -该图层显示圆形填充图层的当前位置

We will also be using 3 sets of Timers for the stopwatch —

我们还将为秒表使用3套计时器-

• One timer which gets called every 1 second to update the seconds of the stopwatch.每1秒调用一次计时器以更新秒表的秒数。
• One timer which gets called every 60 seconds to restart the Circle Fill Layer.每60秒调用一个计时器，以重新启动“圆填充层”。
• One timer is used to update the milliseconds of the stopwatch.一个计时器用于更新秒表的毫秒数。

讲解 (Tutorial)

Start with creating a Single page application in Xcode and choose Storyboards as the User Interface.

首先在Xcode中创建一个单页应用程序，然后选择情节提要作为用户界面。

Design the UI

设计UI

Open Main.storyboard and set up the views

打开Main.storyboard并设置视图

Here is what we have used —

这是我们使用的-

• Stopwatch Container View — A UIView that will contain the stopwatch.秒表容器视图—一个将包含秒表的UIView。
• Stopwatch Time Label — A UILabel that will display the minutes and the seconds when the stopwatch is started.秒表时间标签—一个UILabel，将在秒表启动时显示分钟和秒。
• Stopwatch Seconds Label — A UILabel that will display the milliseconds when the stopwatch is started.秒表秒数标签—一个UILabel，将在秒表启动时显示毫秒。
• Stopwatch Control Button — A UIButton that will be used to start / stop the stopwatch.秒表控制按钮—一个UIButton，用于启动/停止秒表。

编写代码 (Write the code)

Start with connecting the outlets of the view in the viewController

首先在viewController中连接视图的出口

We’ll be using CAShapeLayers to create a layer and add it into the Container view’s layer. Here’s a little introduction to CAShapeLayer —

我们将使用CAShapeLayers创建一个图层并将其添加到Container视图的图层中。 这是CAShapeLayer的一些简介-

CAShapeLayer

CAShapeLayer

A layer that draws a cubic Bezier spline in its coordinate space. The shape is composited between the layer’s contents and its first sublayer.

在其坐标空间中绘制三次贝塞尔曲线样条的图层。 形状在图层内容与其第一子图层之间合成。

We will add 3 CAShapeLayer’s, 3 Timers, 3 colors and some variables to hold the seconds —

我们将添加3个CAShapeLayer，3个计时器，3种颜色和一些变量来保存秒数—

A variable initialValue is used to set the position of the Round Layer since it will be leading the Circle Fill Layer.

变量initialValue用于设置圆形图层的位置，因为它将领先于圆形填充图层。

Now let’s customize the layers and add it to our containerView —

现在，让我们自定义图层并将其添加到我们的containerView中-

Let’s look at the above code —

让我们看一下上面的代码-

The arcPath defines the Circular path inside the containerView, it has a radius of 140 and start angle as 0 and end angle as 360 to create a circle.

arcPath定义containerView内部的圆形路径，其半径为140，起始角度为0，终止角度为360，以创建一个圆。

Then, we customize the Track layer —

然后，我们自定义Track层 -

• ArcPath defined above is assigned as the path of the track.上面定义的ArcPath被指定为轨道的路径。
• StrokeColor is used to define the color of the track.StrokeColor用于定义轨道的颜色。
• LineWidth is used to specify the width of the track.LineWidth用于指定轨道的宽度。
• LineCap is used to specify the style of the stroke — circle, square or butt.LineCap用于指定笔触的样式-圆形，正方形或对接。
• FillColor is used to specify the backgroundColor of the layer.FillColor用于指定图层的backgroundColor。

Customize the Circle Fill Layer —

自定义圆形填充层 -

It’s almost same as the Track Layer with a few additional properties —

它与“跟踪图层”几乎相同，但具有一些其他属性-

• Stroke End is used to specify the percentage of the layer that will be filled with the stroke. It goes from 0–1( 0 % to 100%)描边末端用于指定将用描边填充的图层的百分比。 它从0–1(0％到100％)

Customize the Round Layer —

自定义圆形图层 —

• Stroke Start is used to specify the starting point of the stroke. It goes from 0–1.笔划开始用于指定笔划的起点。 它从0到1。

Finally, we add all the layers to the containerView and customize the button.

最后，我们将所有图层添加到containerView并自定义按钮。

Now let’s define the outlet function when the Start button is tapped —

现在让我们定义点击“开始”按钮时的插座功能-

Pretty simple, if the stopwatch started is set to false, we start the stopwatch & vice-versa.

非常简单，如果将秒表启动设置为false，我们将启动秒表，反之亦然。

We’ll start with the functions for the stopwatch soon, but before that here is a extension to append zeroes to the time if it’s less than 10, so that the time displayed is always in double digits —

我们将很快开始使用秒表的功能，但在此之前，这是对零以下的扩展，如果时间小于10，则将其添加到时间上，以便显示的时间始终为两位数-

extension Int{    func appendZeros() -> String {        if (self < 10) {            return "0\(self)"        } else {            return "\(self)"        }    }}

Now go back to #1, we will add our animation variables just before the viewDidLoad function —

现在回到＃1，我们将在viewDidLoad函数之前添加动画变量-

The strokeStartAnimation animates the strokeStart property of the layer —

strokeStartAnimation为该图层的strokeStart属性设置动画—

• Duration specifies the duration of the animation.持续时间指定动画的持续时间。
• ToValue specifies the endValue that the animation has to reach after the duration.ToValue指定动画在持续时间之后必须达到的endValue。
• Fillmode specfies the mode of the animation — forwards, backwards, or both.Fillmode指定动画的模式-向前，向后或两者。

The strokeEndAnimation animates the strokeEnd property of the layer the properties are the the same as above , the only difference being that is will target the strokeEnd Property.

strokeEndAnimation会为该图层的strokeEnd属性设置动画，该属性与上面的属性相同，唯一的区别是将针对strokeEnd属性。

The logic here is —

这里的逻辑是-

• The Circle Fill Layer has strokeEnd animation applied on it, so that it fills the circle in 60 seconds.

  圆填充层具有 对其应用了strokeEnd动画，以便在60秒内填充圆圈。

• The Round Layer has strokeStart and strokeEnd animation applied on it, so that it leads the Circle Fill Layer, if you don’t provide strokeStart property to this layer, it will behave like Circle Fill Layer, since the starting point is fixed.

  圆层上应用了strokeStart和strokeEnd动画，因此它导致了“ 圆填充层” ，如果不向该层提供strokeStart属性，则它的行为就像“ 圆填充层”一样 ，因为起点是固定的。

Now, let’s look at the functions for the stopwatch —

现在，让我们看一下秒表的功能-

• The stopwatchSecondTimer has a timeInterval of 0.01 and it goes from 0 to 100 milliseconds.秒表秒计时器的timeInterval为0.01，范围为0到100毫秒。
• The stopwatchTimer has a timeInterval of 1 seconds and it’s used to add seconds and minutes to the stopwatch.秒表计时器的timeInterval为1秒，用于向秒表添加秒和分钟。
• The animation function is called initially and then after every 60 seconds with the help of stopWatchAnimationTimer.首先调用动画函数，然后在stopWatchAnimationTimer的帮助下每60秒调用一次。

The animateStopwatch function adds the strokeEndAnimation to Circle Fill Layer and strokeStartAnimation, strokeEndAnimation to Round Layer.

animateStopwatch函数将strokeEndAnimation添加到Circle Fill Layer ，将strokeStartAnimation和strokeEndAnimation添加到Round Layer 。

Finally, let’s look at the function to reset the stopWatch —

最后，让我们看一下重置秒表的功能-

This function resets all the values to the inital value and removes the animations from the layers.

此功能将所有值重置为初始值，并从图层中删除动画。

That’s it! We have created a nice visual Stopwatch with CAShapeLayers and CoreAnimations.

而已！ 我们使用CAShapeLayers和CoreAnimations创建了一个漂亮的可视秒表。

Here is the end result —

这是最终结果-

资源资源 (Resources)

1. The full source code of the ViewController —

   ViewController的完整源代码—

2. Github Repository —

2. Github存储库—

3. Apple Developer Documentation —

3. Apple开发人员文档-

结论 (Conclusion)

Let’s recap what we learned today.

让我们回顾一下我们今天学到的东西。

We started with creating the stopwatch’s components in the storyboard, we added a stopwatchContainer, and UILabels to display the time and a UIButton to control the stopwatch.

我们首先在情节提要中创建秒表的组件，然后添加了stopwatchContainer和UILabel以显示时间，并添加UIButton来控制秒表。

Next, we declared the CAShapeLayers for the stopwatch, timers, and the variables for using the stopwatch and also 2 CABasicAnimation variables to animate the layers.

接下来，我们声明了用于秒表，计时器的CAShapeLayers以及用于使用秒表的变量，还声明了2个CABasicAnimation变量来为图层设置动画。

Next, in the viewDidLoad method, we customized the layers, and the button, and add it to the ContainerView.

接下来，在viewDidLoad方法中，我们自定义了图层和按钮，并将其添加到ContainerView中。

Next, we wrote the code for controlling the stopwatch in the outlet function for the UIButton.

接下来，我们在UIButton的插座功能中编写了用于控制秒表的代码。

Finally, we wrote the functions for starting the stopwatch, which starts the timers, updates the labels, and also adds the animations to the layers. We also defined a resetStopwatch function, which resets the stopwatch.

最后，我们编写了用于启动秒表的功能，该功能用于启动计时器，更新标签以及将动画添加到图层。 我们还定义了一个resetStopwatch函数，该函数将重置秒表。

I hope you were able to understand the concepts of CAShapeLayers, and CoreAnimation well, this is just the starting point, once you start playing with the properties of the layers and CoreAnimation, you can create many cool effects and transitions.

我希望您能够很好地理解CAShapeLayers和CoreAnimation的概念，这只是一个起点，一旦开始使用图层和CoreAnimation的属性，就可以创建许多很酷的效果和过渡。

Thanks for reading this piece. Hope to see you again in the next article!

感谢您阅读本文。 希望在下一篇文章中再见！