c# - MatrixAnimationUsingPath animar en los alrededores(contorno) de la ruta

wpf xaml

Question

Tengo una ruta de datos que puedo copiar desde el programa syncfusion. Tengo una ruta con esa información en mi página y quiero animar mi objeto exactamente en el camino (en medio de la línea de ruta) pero el problema es el movimiento del objeto en el contorno (alrededores) de la ruta.

aquí está el código:

<Canvas ClipToBounds="False" Margin="435,58,279,445" Width="70" Height="70">
                <Path Name="pp" Data="M29.073618888855,0C29.1124091148376,1.1444091796875E-05 29.1515617370605,0.00176620483398438 29.1909990310669,0.00532913208007813 29.810998916626,0.0533294677734375 30.3119988441467,0.530315399169922 30.3919982910156,1.14829635620117L30.5836410522461,2.65130615234375 31.2817029953003,8.12605285644531 34.8569983541965,36.1663000583649 38.6119983196259,11.4410037994385C38.6989989280701,10.8670196533203 39.1539988517761,10.4180335998535 39.7279987335205,10.3390350341797 40.3039989471436,10.2600383758545 40.8659987449646,10.5700283050537 41.1039986610413,11.0990142822266L44.5239992141724,18.6847972869873 62.6889991760254,18.6847972869873C63.4129981994629,18.6847972869873 63.9999980926514,19.2727813720703 63.9999980926514,19.9957599639893 63.9999980926514,20.720739364624 63.4129981994629,21.3077239990234 62.6889991760254,21.3077239990234L43.6779985427856,21.3077239990234C43.1629986763,21.3077239990234,42.6949987411499,21.004732131958,42.4809985160828,20.5357456207275L40.5379986763,16.2248687744141 36.0409992933273,45.8410243988037C35.9439988136292,46.4820065498352,35.3929988443851,46.9559931755066,34.7459992468357,46.9559926986694L34.729998499155,46.9559926986694C34.0749988555908,46.9479932785034,33.5279988050461,46.4590072631836,33.4449987411499,45.8100252151489L28.5969982147217,7.7971076965332 19.7799987792969,38.5482323169708C19.6119985580444,39.1362158469856 19.0699996948242,39.5222048461437 18.4459991455078,39.4962055683136 17.8359985351563,39.4622065722942 17.3289985656738,39.0092194601893 17.2269992828369,38.4062369465828L13.6579990386963,17.2688388824463 10.7719993591309,23.3446655273438C10.5559997558594,23.8016519546509,10.0949993133545,24.0936441421509,9.58799934387207,24.0936441421509L1.31099700927734,24.0936441421509C0.587997436523438,24.0936441421509 0,23.5056610107422 0,22.7826805114746 0,22.0577011108398 0.587997436523438,21.4717178344727 1.31099700927734,21.4717178344727L8.75799942016602,21.4717178344727 13.0749988555908,12.3859767913818C13.3199996948242,11.8689918518066 13.8699989318848,11.57200050354 14.4389991760254,11.6499977111816 15.0059986114502,11.7299957275391 15.4579982757568,12.1669826507568 15.5519981384277,12.7309665679932L18.8509979248047,32.2744116783142 27.8319988250732,0.952301025390625C27.9913740158081,0.391693115234375,28.4917645454407,-0.000171661376953125,29.073618888855,0z" 
                  Stretch="Uniform" Fill="White" Width="70" Height="70" StrokeThickness="0" />
                    <Rectangle Fill="#FFFF4600"  RenderTransformOrigin="0.5,0.5" Width="4" Height="4" Canvas.Top="4">
                    <Rectangle.RenderTransform>
                        <TransformGroup>
                            <MatrixTransform x:Name="tt">
                                <MatrixTransform.Matrix>
                                    <Matrix />
                                </MatrixTransform.Matrix>
                            </MatrixTransform>
                        </TransformGroup>
                    </Rectangle.RenderTransform>
                    <Rectangle.Triggers>
                        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                            <BeginStoryboard>
                                <Storyboard>
                                    <MatrixAnimationUsingPath Duration="0:0:10" Storyboard.TargetName="tt" Storyboard.TargetProperty="Matrix" AutoReverse="True" DoesRotateWithTangent="True" 
                                                             >
                                        <MatrixAnimationUsingPath.PathGeometry>
                                            <PathGeometry Figures="M29.073618888855,0C29.1124091148376,1.1444091796875E-05 29.1515617370605,0.00176620483398438 29.1909990310669,0.00532913208007813 29.810998916626,0.0533294677734375 30.3119988441467,0.530315399169922 30.3919982910156,1.14829635620117L30.5836410522461,2.65130615234375 31.2817029953003,8.12605285644531 34.8569983541965,36.1663000583649 38.6119983196259,11.4410037994385C38.6989989280701,10.8670196533203 39.1539988517761,10.4180335998535 39.7279987335205,10.3390350341797 40.3039989471436,10.2600383758545 40.8659987449646,10.5700283050537 41.1039986610413,11.0990142822266L44.5239992141724,18.6847972869873 62.6889991760254,18.6847972869873C63.4129981994629,18.6847972869873 63.9999980926514,19.2727813720703 63.9999980926514,19.9957599639893 63.9999980926514,20.720739364624 63.4129981994629,21.3077239990234 62.6889991760254,21.3077239990234L43.6779985427856,21.3077239990234C43.1629986763,21.3077239990234,42.6949987411499,21.004732131958,42.4809985160828,20.5357456207275L40.5379986763,16.2248687744141 36.0409992933273,45.8410243988037C35.9439988136292,46.4820065498352,35.3929988443851,46.9559931755066,34.7459992468357,46.9559926986694L34.729998499155,46.9559926986694C34.0749988555908,46.9479932785034,33.5279988050461,46.4590072631836,33.4449987411499,45.8100252151489L28.5969982147217,7.7971076965332 19.7799987792969,38.5482323169708C19.6119985580444,39.1362158469856 19.0699996948242,39.5222048461437 18.4459991455078,39.4962055683136 17.8359985351563,39.4622065722942 17.3289985656738,39.0092194601893 17.2269992828369,38.4062369465828L13.6579990386963,17.2688388824463 10.7719993591309,23.3446655273438C10.5559997558594,23.8016519546509,10.0949993133545,24.0936441421509,9.58799934387207,24.0936441421509L1.31099700927734,24.0936441421509C0.587997436523438,24.0936441421509 0,23.5056610107422 0,22.7826805114746 0,22.0577011108398 0.587997436523438,21.4717178344727 1.31099700927734,21.4717178344727L8.75799942016602,21.4717178344727 13.0749988555908,12.3859767913818C13.3199996948242,11.8689918518066 13.8699989318848,11.57200050354 14.4389991760254,11.6499977111816 15.0059986114502,11.7299957275391 15.4579982757568,12.1669826507568 15.5519981384277,12.7309665679932L18.8509979248047,32.2744116783142 27.8319988250732,0.952301025390625C27.9913740158081,0.391693115234375,28.4917645454407,-0.000171661376953125,29.073618888855,0z">

                                            </PathGeometry>
                                        </MatrixAnimationUsingPath.PathGeometry>
                                    </MatrixAnimationUsingPath>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Rectangle.Triggers>
                </Rectangle>
 </Canvas>

Edición 1: mi animación va mal. Quiero que mi Rectángulo se mueva exactamente dentro y en medio de la línea de ruta. ver el código en tu pc, verás el problema. mi pregunta es cómo solucionar ese problema?

Edición 2: cambio la animación con el mismo resultado de DoubleAnimationUsingPath

Editar 3:

Answer 1

su Path es en realidad un polígono cerrado, no una línea, por lo tanto, el Rectangle mueve en el contorno.

prueba esto en su lugar:

    <Canvas ClipToBounds="False" Width="400" Height="400">
        <Path StrokeThickness="8" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="Red">
            <Path.Data>
                <PathGeometry Figures="M 86,315 L 120,314 L 136,271 L 148,358 L 174,214 L 204,388 L 220,270 L 244,316 L 318,316" />
            </Path.Data>
        </Path>
        <Rectangle Fill="Blue"  RenderTransformOrigin="0.5,0.5" Width="4" Height="4" Margin="-2">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <MatrixTransform x:Name="tt">
                        <MatrixTransform.Matrix>
                            <Matrix />
                        </MatrixTransform.Matrix>
                    </MatrixTransform>
                </TransformGroup>
            </Rectangle.RenderTransform>
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <MatrixAnimationUsingPath Duration="0:0:10" Storyboard.TargetName="tt" Storyboard.TargetProperty="Matrix" AutoReverse="True" DoesRotateWithTangent="True" 
                                                         >
                                <MatrixAnimationUsingPath.PathGeometry>
                                    <PathGeometry Figures="M 86,315 L 120,314 L 136,271 L 148,358 L 174,214 L 204,388 L 220,270 L 244,316 L 318,316">
                                    </PathGeometry>
                                </MatrixAnimationUsingPath.PathGeometry>
                            </MatrixAnimationUsingPath>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>
    </Canvas>