C# WPF中的图标混合动画

我喜欢材料设计的整个概念，尤其是它的动画！在我的手机Musicplayer上，当按下播放/暂停按钮时，一个非常整洁的动画开始在两个图标之间混合，如下所示：

你怎么能在WPF中做这样的事情？也许是小路？ 小费将非常感谢！！谢谢

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

我也做了类似的事情，使用路径将菜单“burger”转换为一个返回箭头

基本上，菜单是三条水平线路径。要转换为后向箭头，将使用双动画使用关键帧对两条外部（上/下线）进行角度调整、缩放和轻微移动

除此之外，整个画布将旋转180度

这是做了很多容易的混合

完整的XAML文件是，您正在寻找MaterialDesignHamburgerToggleButton样式。（我试图发布一个大片段，但堆栈溢出出错。）