c# - 路径动画

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 上设置 EnableDependentAnimation="True" 才能正常工作。

所以像这样改变 Storyboard:

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

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