路径动画

Question

我想让我的道路有动画。这是路径的示例代码：

    <Path Stroke="BlueViolet" StrokeThickness="2">
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigure StartPoint="30, 80">
                        <LineSegment Point="50, 80"/>
                        <QuadraticBezierSegment Point1="70, 20" Point2="90, 80" x:Name="qbs1"/>
                        <QuadraticBezierSegment Point1="110, 140" Point2="130, 80" x:Name="qbs2"/>
                        <LineSegment Point="150, 80"/>
                    </PathFigure>
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
    </Path>

我想让动画创建不同的路径：

    <Path Stroke="BlueViolet" StrokeThickness="2">
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigure StartPoint="30, 80">
                        <LineSegment Point="50, 80"/>
                        <QuadraticBezierSegment Point1="110, 140" Point2="130, 80" x:Name="qbs1"/>
                        <QuadraticBezierSegment Point1="70, 20" Point2="90, 80" x:Name="qbs2"/>
                        <LineSegment Point="150, 80"/>
                    </PathFigure>
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
    </Path>

动画代码是这样的，但它不起作用：

<Page.Resources>
    <Storyboard x:Name="pointanimation">
        <PointAnimation From="70,20" To="70, 140" RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetName="qbs1" Storyboard.TargetProperty="Point1"/>
        <PointAnimation From="110, 140" To="110, 20" RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetName="qbs2" Storyboard.TargetProperty="Point1"/>
    </Storyboard>
</Page.Resources>

我通过按钮点击事件调用它：

    private void button_Click(object sender, RoutedEventArgs e)
    {
        pointanimation.Begin();
    }

我需要它来制作这样的动画：

我在哪里弄错了？我该怎么做才能让它发挥作用？

Answer 1

您需要在每个PointAnimation上设置<Storyboard x:Name="pointanimation"> <PointAnimation From="70,20" To="70,140" EnableDependentAnimation="True" RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetName="qbs1" Storyboard.TargetProperty="Point1"/> <PointAnimation From="110, 140" To="110, 20" EnableDependentAnimation="True" RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetName="qbs2" Storyboard.TargetProperty="Point1"/> </Storyboard> 才能生效。

所以改变故事板如下：

.pure-u-*

由于潜在的性能影响，您需要设置此项。 （MSDN link on DependentAnimations