Question

我已经创建了自定义按钮，并且过去使用过自定义UIViews。但是我不知道该怎么做。

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

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

有什么想法吗？

我是否可以简单地使用gif并将gif作为自定义视图添加到UIButton中并在按下按钮时播放gif？

Answer 1

这是一个概念：


- (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];
}

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

Answer 2

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

Answer 3

延迟回答但对其他开发人员有用。以下是完全相同动画的链接：https://github.com/xhamr/fave-button

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

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

3 个答案: