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

【问题标题】：iOS how to create animating buttons similar to Twitter heart button?iOS 如何创建类似于 Twitter 心形按钮的动画按钮？
【发布时间】：2016-12-29 14:19:19
【问题描述】：

我过去曾创建自定义按钮并使用自定义 UIView。但是我不知道该怎么做。

我正在尝试创建类似于 twitter 心脏动画的东西。我无法得到的是心脏周围的那些微小的彩色圆圈，如下图所示：

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

有什么想法吗？

我也可以简单地拥有一个 gif 并将 gif 添加为 UIButton 中的自定义视图并在按下按钮时播放 gif？

【问题讨论】：

animateKeyFramesWithDuration 可能会获得 90% 的这种效果。
@ncke 谢谢，你知道如何制作气泡吗？
也许使用 16x16 尺寸和 layer.cornerRadius 设置为 8 的 UIView。
@ncke 所以我将为每个气泡创建一个圆形 UIView 并为外面的运动设置动画？
是的。只是一个想法。气泡将是心脏的子视图，您可以将动作 - 停止 - 淡入淡出作为关键帧。

标签： ios objective-c animation uiview uibutton

【解决方案1】：

答案较晚，但对其他开发人员有用。这是完全相同的动画的链接：https://github.com/xhamr/fave-button

Objective-C 中也有相同的动画：https://github.com/tljackyi/fave-button

【讨论】：

嗨 Mitul，你知道如何在 Objective C github.com/tljackyi/fave-button 中使用动画吗？我对如何将网站图标添加到我的 VC 感到有点困惑。没有点击功能可以添加代码，我什至不知道如何将其放置在导航栏上，请帮助。

【解决方案2】：

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

【讨论】：

【解决方案3】：

这是一个概念：


- (void)viewDidAppear:(BOOL)animated {

    [super viewDidAppear:animated];

    UIView *bubble = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 16.0, 16.0)];
    bubble.layer.cornerRadius = 8.0;
    bubble.center = self.view.center;
    bubble.backgroundColor = [UIColor greenColor];
    [self.view addSubview:bubble];

    UIView *heart = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 100.0, 100.0)];
    heart.layer.cornerRadius = 50.0;
    heart.center = self.view.center;
    heart.backgroundColor = [UIColor blueColor];
    [self.view addSubview:heart];

    [UIView animateKeyframesWithDuration:2.0
                                   delay:0.0
                                 options:UIViewKeyframeAnimationOptionRepeat
                              animations:^{

                                  // Heart expands
                                  [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.10 animations:^{
                                      heart.transform = CGAffineTransformMakeScale(1.3, 1.3);
                                  }];

                                  // Heart contracts.
                                  [UIView addKeyframeWithRelativeStartTime:0.15 relativeDuration:0.25 animations:^{
                                      heart.transform = CGAffineTransformMakeScale(1.0, 1.0);
                                  }];

                                  // Bubble travels.
                                  [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.4 animations:^{
                                      CGPoint destination = self.view.center;
                                      destination.x += 100;
                                      destination.y -= 100;
                                      bubble.center = destination;
                                  }];

                                  // Bubble shrinks.
                                  [UIView addKeyframeWithRelativeStartTime:0.6 relativeDuration:0.2 animations:^{
                                      bubble.transform = CGAffineTransformMakeScale(0.3, 0.3);
                                  }];

                                  // Bubble fades.
                                  [UIView addKeyframeWithRelativeStartTime:0.8 relativeDuration:0.2 animations:^{
                                      bubble.alpha = 0.0;
                                  }];

                              } completion:nil];
}

要获得完整效果，您需要添加更多关键帧，以便气泡在淡入淡出之前弯曲。鉴于您有几个气泡，创建一个关键帧生成器可能是个好主意。

【讨论】：

非常感谢！我会试一试并在几天内更新