iOS如何创建类似Twitter心形按钮的动画按钮？

Question

我曾经创建过自定义按钮并使用自定义的UIView。然而我不知道该怎样去实现这个。

我想要创造类似于Twitter心形动画的东西。 我无法得到的是那些小色圆圈围绕在心中，如此gif所示:

https://dribbble.com/shots/2416983-Twitter-Heart-Animation

有什么想法吗？

另外，我是否可以只拥有一个gif并将其添加为自定义视图中的一个UIButton，并在按下按钮时播放gif？

- sudoExclaimationExclaimation

---

animateKeyFramesWithDuration 可能会让你获得这个效果的90%。 - ncke

@ncke 谢谢，你知道如何创建气泡吗？ - sudoExclaimationExclaimation

可以使用一个大小为16x16的UIView，并将layer.cornerRadius设置为8。 - ncke

@ncke 所以我将为每个气泡创建一个圆角UIView并在外部动画移动？ - sudoExclaimationExclaimation

是的，只是一个想法。气泡将成为心形视图的子视图，您可以使用关键帧进行运动-停止-淡出操作。 - ncke

https://github.com/xhamr/fave-button - user2722667

Answer 1

这是一个概念：

- (void)viewDidAppear:(BOOL)animated {

为了达到最佳效果，您需要添加一些关键帧，使气泡在淡出之前绕着曲线移动。考虑到您有几个气泡，创建一个关键帧生成器可能是个好主意。

- ncke

---

非常感谢！我会尝试并在几天内更新。 - sudoExclaimationExclaimation

Answer 2

或者，您可以使用SKEmitterNode并向按钮添加真实粒子。

- GeneCode

Answer 3

虽然回答晚了，但对其他开发人员有用。 这是完全相同动画的链接：https://github.com/xhamr/fave-button Objective-C中也有相同的动画：https://github.com/tljackyi/fave-button

- Mitul Bhadeshiya

---

嗨Mitul，你知道如何在Objective C https://github.com/tljackyi/fave-button中使用动画吗？我有点困惑如何将favicon添加到我的VC。没有tapped函数供我添加代码，并且我甚至不知道如何将其放置在导航栏上，请帮帮我。 - Hanz Cheah