MatrixAnimationUsingPath animacja na otoczenie (kontur) ścieżki

Question

Mam dane ścieżek, które kopiuję je z programu synchronizacji. Mam ścieżkę z tymi danymi na mojej stronie i chcę animować obiekt dokładnie na ścieżce (w połowie linii ścieżki), ale problemem jest ruch obiektu na konturze (otoczeniu) ścieżki.

tutaj jest kod:

<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: moja animacja przejść niewłaściwy sposób. Chcę, aby mój prostokąt poruszał się dokładnie wewnątrz i pośrodku linii ścieżki. zobacz kod na twoim komputerze, zobaczysz problem. moje pytanie brzmi, jak rozwiązać ten problem?

Edit 2: i zmienić animację z DoubleAnimationUsingPath samego rezultatu

Edycja 3:

Answer 1

swój Path jest właściwie zamknięty wielobok nie linia, dlatego Rectangle porusza się na zarysie.

spróbować zamiast:

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