XAML / WPF的（自动）路径/矢量动画

Question

我正在尝试在WPF中实现播放/暂停动画，该动画需要在路径之间进行很好的过渡才能获得材质设计的外观。

动画可能看起来像这样：

不幸的是，我找不到在StoryBoard中修改路径的方法（既不能在Visual Studio Blend中，也不能通过XAML）-有没有一种方法可以自动在两条路径之间进行融合，类似于android的处理方式（AnimatedVectorDrawable）？还是有一种方法可以手动混合两者之间的值，以指定值的变化？

路径如下：

M12,10L20,10 20,38 12,38z M28,10L36,10 36,38 28,38z              #Pause
M16,24L38,24 27.3,30.8 16,38z M16,10L27.3,17.2 38,24 16,24z      #Play

Answer 1

通常，我肯定会同意@PeterDuniho的广泛性。除了我去过那里。因此，这是一个快速的Storyboard概念示例，可以实现您的目标，并让您深入了解LineSegment.Point包含良好的动画。

关键是您需要为动画的每个部分都需要一个分割点，这与以SVG为例进行变形效果的方式不同。因此，如果动画中的一个形状具有例如4个点，而另一个具有3个点。嗯，那么您仍然需要Path在整个时间内保持4个点，并且只需将每个形状中的现有点隐藏起来，就可以给出变形的错觉。

因此，以下示例是一个简单示例，但足以使创意不断发展，可以在ToggleButton示例中考虑IsChecked = True / False的基础上将其构建并添加到类似模板的内容中。如果您需要的还不止这些，那么最好返回更多细节，或者想想像我这样的人以这种事情为生。:)

无论如何，请将此网格放在任何位置，然后将鼠标悬停在其上以调用动画。

希望这会有所帮助，干杯！

结果示例.gif（减至.05s KeyTime）

<Grid>
        <Grid.Resources>
            <Storyboard x:Key="ChrisW-shapeTransform">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="grid">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="90"/>
                </DoubleAnimationUsingKeyFrames>
                <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(LineSegment.Point)" Storyboard.TargetName="path">
                    <EasingPointKeyFrame KeyTime="0:0:0.2" Value="35,25"/>
                </PointAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="path">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="10"/>
                </DoubleAnimationUsingKeyFrames>
                <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(LineSegment.Point)" Storyboard.TargetName="path1">
                    <EasingPointKeyFrame KeyTime="0:0:0.2" Value="34.9687517366199,8.02473365979495E-07"/>
                </PointAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="path1">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="10"/>
                </DoubleAnimationUsingKeyFrames>
                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path1">
                    <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FFB60303"/>
                </ColorAnimationUsingKeyFrames>
                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="path">
                    <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FFB60303"/>
                </ColorAnimationUsingKeyFrames>
            </Storyboard>
        </Grid.Resources>
        <Grid.Triggers>
            <EventTrigger RoutedEvent="UIElement.MouseEnter">
                <BeginStoryboard Storyboard="{StaticResource ChrisW-shapeTransform}"/>
            </EventTrigger>
        </Grid.Triggers>

        <Grid x:Name="grid" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
            <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Grid.RenderTransform>
            <Path x:Name="path1" Fill="#FF23B603" Margin="0,0,0,25" Width="35" Height="25">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure IsClosed="True" StartPoint="3.40174928936676E-06,8.28996221002853E-07">
                            <LineSegment Point="3.40174928936676E-06,25.0000021090614"/>
                            <LineSegment Point="34.9999995333882,25.0000021090614"/>
                            <LineSegment Point="24.2397154485391,17.2785287275999"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Path x:Name="path" Fill="#FF23B603" Height="25" Width="35" Margin="0,25,0,0">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure IsClosed="True" StartPoint="0,0">
                            <LineSegment Point="35.0000012644377,0"/>
                            <LineSegment Point="24.2397160835937,7.72147280089242"/>
                            <LineSegment Point="0,24.9999997857589"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Grid>

    </Grid>