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

我已经创建了自定义按钮，并在过去使用自定义UIViews。不过，我不知道如何解决这个问题。iOS如何创建类似于Twitter心形按钮的动画按钮？

我想创建类似于twitter心脏动画的东西。我所无法得到的是心脏周围那些细小的彩色圆圈所示，在这个GIF：

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

任何想法？

也有可能我只是有一个gif并添加gif作为UIButton中的自定义视图，并按下按钮时播放GIF？

来源

2016-08-22 Pranoy C

animateKeyFramesWithDuration可能会得到你90％的这种效果。 – ncke

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

也许使用16x16大小的UIView和layer.cornerRadius设置为8. – ncke

这里有一个概念：


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

要获得完整的效果，则需要在淡出前四周添加任何几个关键帧所以泡沫曲线。鉴于你有几个气泡，创建关键帧生成器可能是一个好主意。

来源

2016-08-22 23:02:13 ncke

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