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>

使用XAML / WPF（路径/向量）的（自动）动画

1 个答案: