Icon blending animation in WPF

Question

I love the whole concept of Material Design, and especially its animations! And on my phones Musicplayer when pressing the Play/Pause button a relly neat animation starts blending between the two icons like this:

How can you do something like this in WPF? Maybe with Paths? Tips would be really appreciated!! thanks

Answer 1

I have done something similar in Material Design in XAML Toolkit which replicates the menu 'burger' transitioning into a back arrow, using paths.

Essentially the menu is three horizontal line paths. To convert to a back arrow the two outer (above/below lines) are angled, scaled, and slightly moved using DoubleAnimationUsingKeyFrames.

On top of that the entire canvas is rotated 180 degrees.

This was made a lot easier by doing in blend.

The full XAML file is on GitHub here , you are looking for the MaterialDesignHamburgerToggleButton style. (I tried posting a large snippet, but Stack Overflow errored.)

Answer 2

<Window x:Class="Demo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="650" Width="500"
        xmlns:local="clr-namespace:Demo">
    <Grid>
        <Button Height="40" HorizontalAlignment="Left" IsEnabled="True" IsHitTestVisible="True" Margin="262,219,0,0" Name="home_btn" VerticalAlignment="Top" Width="89">
            <Button.Template>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Image Name="Normal" Source="pause.png" />
                        <Image Name="Hover" Source="play.png" Opacity="0"/>
                        <Image Name="Pressed" Source="pause.png" Opacity="0" />
                    </Grid>
                    <ControlTemplate.Resources>
                        <Storyboard x:Key="MouseDownTimeLine">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Pressed" Storyboard.TargetProperty="Opacity">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.05" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="MouseUpTimeLine">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Pressed" Storyboard.TargetProperty="Opacity">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="MouseEnterTimeLine">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Hover" Storyboard.TargetProperty="Opacity">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="MouseExitTimeLine">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Hover" Storyboard.TargetProperty="Opacity">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </ControlTemplate.Resources>
                    <ControlTemplate.Triggers>
                        <Trigger Property="ButtonBase.IsPressed" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource MouseDownTimeLine}"/>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource MouseUpTimeLine}"/>
                            </Trigger.ExitActions>
                        </Trigger>
                        <Trigger Property="UIElement.IsMouseOver" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource MouseEnterTimeLine}"/>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource MouseExitTimeLine}"/>
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>
        </Button>
    </Grid>
</Window>