Quiero hacer mi camino para tener animación. Este es un código de ejemplo para la ruta:

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

Quiero hacer que la animación cree una ruta diferente:

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

El código de animación es así, pero no funciona:

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

Lo estoy llamando a través del evento de clic de botón:

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

Lo necesito para hacer una animación como esta:

enter image description here

¿Dónde estoy cometiendo un error? ¿Qué debo hacer para que funcione?

2
user3239349 16 ene. 2017 a las 12:45

1 respuesta

La mejor respuesta

Debe configurar EnableDependentAnimation="True" en cada PointAnimation para que esto funcione.

Así que cambie el Storyboard de esta manera:

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

Debe establecer esto debido a las posibles implicaciones de rendimiento. (vínculo de MSDN en Animaciones dependientes.

0
Matt Lacey 16 ene. 2017 a las 20:09