WPF中的图标混合动画

Question

我喜欢Material Design的整个概念，特别是它的动画！在我的手机Musicplayer上按下播放/暂停按钮时，一个相当整洁的动画开始在两个图标之间混合，如下所示：

你怎么能在WPF中做这样的事情？也许与路径？ 小贴士真的很感激!!感谢

Answer 1

我在Material Design in XAML Toolkit做了类似的事情，它使用路径复制菜单'汉堡'过渡到后箭头。

本质上菜单是三条水平线路径。要转换为后向箭头，请使用DoubleAnimationUsingKeyFrames对两个外部（上/下线）进行倾斜，缩放和轻微移动。

最重要的是整个画布旋转180度。

通过混合实现这一点变得更容易。

完整的XAML文件为on GitHub here，您正在寻找 MaterialDesignHamburgerToggleButton 样式。 （我尝试发布一个大片段，但Stack Overflow出错了。）

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>