How to create an Instagram like heart animation in a UWP app

0
2365

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

For the hearts 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 the stroke and another one with the 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 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=”&#xE006;” 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=”&#xE00B;” 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 the below two storyboards to the page resources.

<Page.Resources>

<!– First storyboard –>

<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>

 

<!–Second 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 a very simple version for the sake of explaining. But in a real app these shapes will probably end up in a user control.

image5

Comments

comments

LEAVE A REPLY

Please enter your comment!
Please enter your name here