MatrixAnimationUsingPath animate su Dintorni (struttura) del percorso

Question

Ho un percorso dati che lo ho coppato dal programma syncfusion. ho un percorso con quei dati nella mia pagina e voglio animare il mio oggetto esatto sulla strada del percorso (a metà della linea del percorso) ma il problema è lo spostamento dell'oggetto sul contorno (dintorni) del percorso.

Ecco il codice:

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

Edit 1: mia animazione andare modo sbagliato. voglio che il mio Rettangolo si muova esattamente all'interno e al centro della linea del percorso. vedi il codice nel tuo PC vedrai il problema. la mia domanda è come risolvere quel problema?

Edit 2: cambio l'animazione con DoubleAnimationUsingPath stesso risultato

Edit 3:

Answer 1

tua Path è in realtà un non poligono chiuso una linea, quindi i Rectangle si muove sul contorno.

Prova a modificare:

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