您的位置:首页 > 移动开发 > Swift

instagram在中国_在Swift中重新创建Instagram“赞”动画

2020-07-26 11:41 1516 查看

instagram在中国

Animations can greatly improve a user’s experience when interacting with a mobile application. In this tutorial, I will show you how to recreate a very simple animation most of us are familiar with: Instagram’s “like” animation.

与移动应用程序进行交互时,动画可以极大地改善用户的体验。 在本教程中,我将向您展示如何重新创建我们大多数人都熟悉的非常简单的动画:Instagram“ like”动画。

Let’s start by adding the heart icon assets we’re going to be using in our Xcode project. One is white and the other red (I usually find great icons on Icons8).

首先,添加要在Xcode项目中使用的心脏图标资产。 一个是白色,另一个是红色(我通常在Icons8上找到不错的图标)。

Assets folder in Xcode Xcode中的Assets文件夹

Now let’s create a class for our button. We will call it

HeartButton
and will make it a subclass of
UIButton
. Let’s start by just setting the initial image to the empty heart.

现在让我们为按钮创建一个类。 我们将其称为

HeartButton
,并将其
HeartButton
UIButton
的子类。 让我们从将初始图像设置为空的心开始。

If you add a

HeartButton
to your app and run it, it will look something like this:

如果将

HeartButton
添加到您的应用程序并运行它,它将看起来像这样:

Let’s add some code to keep track of the state of the button, as well as a method to flip this state and animate the button accordingly. The animation itself consists of two main steps:

让我们添加一些代码来跟踪按钮的状态,以及一种翻转该状态并相应地使按钮动画的方法。 动画本身包括两个主要步骤:

  • Step one: When the button is pressed, we scale the button down (using the scale transform) and flip the heart image.

    第一步:按下按钮后,我们将按钮缩小(使用scale transform )并翻转心脏图像。

  • Step two: When the animation has finished, we return the button to its original scale (we do this by applying the

    identity
    transform).

    第二步:动画完成后,我们将按钮恢复为其原始比例(通过应用

    identity
    transform进行此操作 )。

We will achieve these steps by using

UIView.animate
, where the animation block will execute step one above and the completion block will execute step two in an animation of itself:

我们将使用

UIView.animate
实现这些步骤,其中animation块将执行上面的第一步,而completion块将在本身的动画中执行第二步:

Now, when your button is tapped, you can call the

flipLikedState
method to execute the animations.

现在,点击按钮时,您可以调用

flipLikedState
方法执行动画。

We can also make some tweaks so that the scale of our

HeartButton
will vary depending on the state it’s getting into. For example, if the button enters the “liked” state, we can scale it up before returning it to its normal size. Alternatively, if the button enters the “unliked” state, we can scale it down before returning it to its normal size.

我们还可以进行一些调整,以使

HeartButton
大小根据其进入的状态而有所不同。 例如,如果按钮进入“喜欢”状态,我们可以先放大按钮,然后再将其恢复为正常大小。 另外,如果按钮进入“不喜欢”状态,我们可以按比例缩小按钮,然后再将其恢复为正常大小。

Our final

HeartButton
implementation looks like this:

我们最终的

HeartButton
实现如下所示:

Even simple animations, like this heart animation used by Instagram, can improve our experience when navigating an app. You can find a full demo for this animation on Github.

甚至简单的动画(例如Instagram使用的这种心脏动画)也可以改善我们浏览应用程序时的体验。 您可以在Github上找到此动画的完整演示。

Thanks for reading, I hope you found this article useful.

感谢您的阅读,希望您对本文有所帮助。

翻译自: https://medium.com/better-programming/recreating-instagrams-like-️-animation-in-swift-6b95f74c9593

instagram在中国

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: