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

非常感謝你！我會試一試並在幾天內更新 –