ios swift 动画_结合：Swift中iOS动画的救星

ios swift 动画

iOS开发中的动画 (Animation in iOS development)

Generally, in order to build the fancy UI animation, iOS developers have to write a lot of code based on

通常，为了构建精美的UI动画，iOS开发人员必须根据以下内容编写大量代码

which control the asynchronous animation flow by the completion handler.

由完成处理程序控制异步动画的流程。

In most scenarios, your code might look like

在大多数情况下，您的代码可能看起来像

so… WELCOME TO THE CALLBACK HELL !

所以……欢迎来到回调地狱！

You might think that you can solve this problem by setting the delay interval of the animation block like

您可能认为可以通过设置动画块的延迟间隔来解决此问题，例如

It seems like the callback hell has been eliminated and the mission accomplished.

回调地狱似乎已经消除，任务已经完成。

However, some other issues emerged from the above code. What if we want to make the animation conditional, for example, the view will fade out only if it was faded in. Obviously you need some more code to save the result of the first animation, and determine whether to play the second one in its animation block. It’ll work, but in an ugly way, not to mention using the delay interval to control the flow will make the code fragile. Without further unit/ui testing, the animation could easily break down since a small change to the duration of the first animation.

但是，上述代码还出现了其他一些问题。 例如，如果我们要使动画成为条件动画，该视图仅在淡入时才会淡出。显然，您需要更多代码来保存第一个动画的结果，并确定是否在其动画中播放第二个动画动画块。 它将起作用，但是以一种丑陋的方式，更不用说使用延迟间隔来控制流了，这会使代码变得脆弱。 如果没有进一步的单元/ ui测试，则动画很容易崩溃，因为对第一个动画的持续时间进行了很小的更改。

Don’t panic first! All issues mentioned above are not kind of big news. There’re lots of third party framework try to help us solve these asynchronous control flow issues which you’ve probably used before.

不要惊慌！ 上面提到的所有问题都不是什么大新闻。 有很多第三方框架试图帮助我们解决您以前可能使用过的这些异步控制流问题。

If you are familiar with the frameworks above, you might find the code below easy to understand, even though I’m not using the framework above, the mindset remains the same. We’ve been focused on the problem for too long, time to find out the solution!

如果您熟悉上面的框架，那么即使我不使用上面的框架，也可能会发现下面的代码易于理解，即使您使用上面的框架，想法还是一样的。 我们一直专注于解决问题的时间太长，无法找到解决方案！

解 (Solution)

Combine is an official framework aimed to help developers manage the asynchronous data flow, it’s been documented well. Furthermore, you can find massive tutorials of Combine on the internet, so forgive me for skipping the introduction part.

Combine是一个正式的框架，旨在帮助开发人员管理异步数据流，已有很好的文档证明。 此外，您可以在互联网上找到大量的Combine教程，因此请原谅我跳过介绍部分。

Objectives:

目标：

1. Support conditional animation.
   支持条件动画。
2. Stream base animation flow instead of completion handler.
   流基础动画流，而不是完成处理程序。
3. Looked cool 😎
   看起来很酷😎

Preflight: Make sure you’re familiar with the concept of reactive programming

飞行前：确保您熟悉React式编程的概念

In Combine, those objects deliver new elements are called Publisher. The first step is creating our animation publisher who will deliver a boolean once the animation completed, which means this publisher will pass only one element to the down stream and I’ve already found my ideal Publisher in this scenario.

在合并中，那些交付新元素的对象称为发布者。 第一步是创建我们的动画发布者，动画完成后将提供一个布尔值，这意味着该发布者将只向下游传递一个元素，在这种情况下，我已经找到了理想的发布者。

Wrap the animation functions in Future

在将来包装动画功能

You can create your animation like

您可以像创建动画一样

It works like a charm 😉 😘. How about something more tricky.

它的作用就像是魅力charm。 那有些棘手的事情呢。

Conditional animation, CHECKED ✅!

有条件动画，CHECKED✅！

穿过 (Walk through)

Let’s walk through the code step by step

让我们逐步介绍代码

First, we fire up the first stage of our animation which will spend 1.5 seconds moving the cube from left top to the center of the view and spend 0.5 seconds changing the background color from red to blue and making the cube bigger at the same time. We prepend a false to both publishers as the initial state.

首先，我们启动动画的第一阶段，该阶段将花费1.5秒将多维数据集从左上移到视图的中心，并花费0.5秒将背景颜色从红色更改为蓝色，并同时使多维数据集变大。 对于两个发布者，我们都将false设置为初始状态。

Second, we’ll play the C animation once the animations in first stage triggered, play the B animation right after the second animation finished, and play the A animation after step one finished.

其次，一旦第一阶段的动画触发，我们将播放C动画，在第二个动画完成后立即播放B动画，并在第一步完成后播放A动画。

At last, print “animation finished” to the console as a perfect ending.

最后，将“动画完成”打印到控制台作为完美的结局。

结论 (Conclusion)

You might think that the conditional animation is a little bit useless, but it becomes handy while you have to clean up once your animation is cancelled (usually by another animation or modification of the view hierarchy). And the real power of Combine + UIView.animate is that we can concatenate animations in a declarative way, and easily branch out or merge the animation flow.

您可能会认为条件动画有点用处，但是一旦取消动画(通常是通过另一个动画或视图层次结构的修改)就必须清理时，它便变得很方便。 Combine + UIView.animate的真正功能在于，我们可以以声明的方式连接动画，并轻松地分支或合并动画流。

翻译自: https://medium.com/swlh/save-your-animation-code-from-callback-hell-with-combine-27b8a0961fa9

ios swift 动画