swift 关键帧动画_Swift 5中的关键帧动画是什么？

swift 关键帧动画

Today we will learn about keyframe animations in Swift. In short, they allow us to combine several UIView animations in one flow. This way, you can create a complex-looking animation with ease by breaking it into distinct, smaller steps.

今天，我们将学习Swift中的关键帧动画。 简而言之，它们使我们可以在一个流程中组合多个UIView动画。 这样，您可以通过将动画分成不同的较小步骤来轻松创建外观复杂的动画。

We will quickly experiment with a keyframe animation in an Xcode Playground. This is what we are going to achieve:

我们将在Xcode Playground中快速试验关键帧动画。 这是我们要实现的目标：

The source code is available at the bottom of the article.

源代码位于文章底部。

开始吧 (Let’s Start)

We have a simple rounded UIView centered vertically in a UIViewController:

我们有一个简单的圆形UIView垂直放置在UIViewController ：

As we can see, we have references to two NSLayoutConstraints we will animate.

如我们所见，我们引用了两个要设置动画的NSLayoutConstraint 。

Currently, nothing happens and the circle stands still:

目前，什么也没发生，圈子仍然静止不动：

Let’s change that. Add the performAnimations() method and call it inside the viewDidAppear() method:

让我们改变它。 添加performAnimations()方法并在viewDidAppear()方法内调用它：

We implement the animateKeyframes method in which we will add all our animations. We give three seconds for the overall animation process to be completed.

我们实现animateKeyframes方法，在其中添加所有动画。 我们会花三秒钟来完成整个动画过程。

Now it’s time to add individual animations. Create a new method called addKeyframes(count:) that will generate a number of keyframe animations that will alter the constant property of the constraints:

现在是时候添加单个动画了。 创建一个名为addKeyframes(count:)的新方法，该方法将生成许多关键帧动画，这些动画将更改约束的constant属性：

A few takeaways here:

这里有一些要点：

• The withRelativeStartTime parameter takes a Double value indicating a relative starting time for the keyframe animation. For example, if we pass 0 as a parameter, this particular animation will start first.

  withRelativeStartTime参数采用Double值，该值指示关键帧动画的相对开始时间。 例如，如果我们传递0作为参数，则该特定动画将首先开始。

• Similarly, the relativeDuration parameter specifies the relative time the provided keyframe will take. In our case, we previously specified three seconds of time for the whole chain of animations. Therefore, as we passed the 0.1 value here, it means that this particular animation will take 0.3 seconds.

  同样， relativeDuration参数指定提供的关键帧将花费的相对时间。 就我们而言，我们之前为整个动画链指定了三秒钟的时间。 因此，当我们在此处传递0.1值时，这意味着该特定动画将花费0.3秒。

As we can see, we sequentially alter the centerXConstraint and centerYConstraint so that the circle moves in both x and y directions. For the actual constraint animation to happen, we run the layoutIfNeeded() method on the root view.

如我们所见，我们依次更改了centerXConstraint和centerYConstraint以便圆在x和y方向上移动。 为了使实际的约束动画发生，我们在根view上运行layoutIfNeeded()方法。

Now let’s call this method inside the performAnimations():

现在让我们在performAnimations()内部调用此方法：

We pass in eight animations that will take 80% of the three seconds of animation time.

我们传入八个动画，这将占用三秒钟动画时间的80％。

Now we can see the circle shifting to the right and rising to the top at the same time:

现在我们可以看到圆向右移动并同时上升到顶部：

Let’s now add the remaining touches to our work.

现在，让我们将其余的内容添加到我们的工作中。

We need the circle to fade out after it has risen to the top and then show up at the beginning of its route. We also want the animation to run infinitely. These animations will take the remaining 20% time of the total of 3 seconds.

我们需要圆圈在升至顶部后逐渐消失，然后在路线的起点出现。 我们还希望动画无限运行。 这些动画将花费3秒的剩余20％时间。

Update the performAnimations() method like so:

像这样更新performAnimations()方法：

We add two additional keyframes:

我们添加了两个其他关键帧：

• One places the circle -20 points from the left and makes it transparent.
  一个将圆圈从左侧放置-20点并使之透明。
• Another brings it to +10 points from the left and makes it visible.
  另一个将其从左侧移至+10点并使其可见。

Note that we also recursively call the performAnimation() method inside the completion handler.

请注意，我们还以递归方式调用完成处理程序中的performAnimation()方法。

Finally, we have achieved our task:

最后，我们完成了任务：

资源资源 (Resources)

The source code is available in a Gist.

源代码在Gist中可用。

Thanks for reading!

谢谢阅读！

翻译自: https://medium.com/better-programming/what-are-keyframe-animations-in-swift-5-55eaf04f7637

swift 关键帧动画