How To Create An Instagram Like Heart Animation In A UWP App

We all have seen the lovely heart animation we get when we double tap on a photo in Instagram. Well, it’s pretty easy to get a similar kind of animation in a UWP app using XAML storyboards. So, let’s get started. First of all, create a blank Universal Windows app in Visual Studio.

For the heart, we can use the Segoe MDL2 Assets font, which is built into Windows 10. Also, we can easily scale them without getting any blurriness. We can use the `FontIcon` control to add these shapes. We need two heart shapes - one with stroke and the other one with fill.

Basically, what we are going to do is scale up the filled heart shape when the user double taps the other heart shape. So, we are going to overlap them so that the filled heart is in the front. Below is the XAML code to achieve the above.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<FontIcon x:Name="HeartBase" VerticalAlignment="Center" HorizontalAlignment="Center" Glyph="" RenderTransformOrigin="0.5,0.5" Foreground="#FFDE1C1C" DoubleTapped="HeartBase_DoubleTapped">
<FontIcon.RenderTransform>
<ScaleTransform ScaleX="4" ScaleY="4" /> </FontIcon.RenderTransform>
</FontIcon>
<FontIcon x:Name="Heart" VerticalAlignment="Center" HorizontalAlignment="Center" Glyph="" RenderTransformOrigin="0.5,0.5" Foreground="#FFDE1C1C" Visibility="Collapsed">
<FontIcon.RenderTransform>
<ScaleTransform x:Name="HeartScaleTransform" /> </FontIcon.RenderTransform>
</FontIcon>
</Grid>

Now, we have to create the animations. To do that, we are going to use XAML `Storyboards`. We are going to change the value of ScaleX and ScaleY of the `ScaleTransform` of the filled heart. Below is the XAML code for the animations. The second `Storyboard` will add a little shrinking effect after the heart is fully scaled up. So, it will add a natural touch to the animation. We can add these two storyboards to the page resources -

<Page.Resources>
<Storyboard x:Name="HeartAnimStoryboard">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Heart" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> </ObjectAnimationUsingKeyFrames>
<DoubleAnimation From="4.0" To="9.0" Duration="0:0:0.4" Storyboard.TargetName="HeartScaleTransform" Storyboard.TargetProperty="ScaleX">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseOut" /> </DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation From="4.0" To="9.0" Duration="0:0:0.4" Storyboard.TargetName="HeartScaleTransform" Storyboard.TargetProperty="ScaleY">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseOut" /> </DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
<Storyboard x:Name="HeartBackAnimStoryboard">
<DoubleAnimation From="9.0" To="7.0" Duration="0:0:1" Storyboard.TargetName="HeartScaleTransform" Storyboard.TargetProperty="ScaleY">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseOut" /> </DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation From="9.0" To="7.0" Duration="0:0:1" Storyboard.TargetName="HeartScaleTransform" Storyboard.TargetProperty="ScaleX">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseOut" /> </DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</Page.Resources>

Finally, we have to add the `DoubleTap` event handler to the stroked heart shape. Inside the event handler, we are going to begin the first `Storyboard` and we are adding an event handler to the ‘Completed’ event of that `Storyboard`. So, we can stop the first one and begin the second ‘Storyboard’. Check the below code.

private void HeartBase_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e) {
HeartAnimStoryboard.Begin();
HeartAnimStoryboard.Completed += HeartAnimStoryboard_Completed;
}
private void HeartAnimStoryboard_Completed(object sender, object e) {
HeartBackAnimStoryboard.Begin();
HeartBackAnimStoryboard.Completed += (s, m) => {
HeartBackAnimStoryboard.Stop();
HeartAnimStoryboard.Stop();
};
HeartAnimStoryboard.Completed -= HeartAnimStoryboard_Completed;
}

Now, we can run the app. The below image is the final result. Now, this is very simple version for the sake of explaining. But in a real app, these shapes will probably end up in a user control.

UWP