WPF: Animieren entlang der Pfadgeometrie

Ich beschäftige mich seit einer Woche mit dem folgenden Problem. Bitte, ertragen Sie mit mir, wie ich es erkläre.WPF: Animieren entlang der Pfadgeometrie

Was ich versuche zu erreichen, ist für einige von uns ziemlich einfach, aber neu in WPF zu sein macht es schwierig.

Das Bild oben durch Umwandlung (bereits hatte) svg-xaml und danach den Import es zu Visual Studio gemacht wurde. So sieht das Xaml aus.

<Canvas x:Name="Main" Margin="158,-223,-148,233"> 
     <Canvas.RenderTransform> 
      <MatrixTransform Matrix="1.25 0 0 -1.25 -197.1231 961.58875"/> 
     </Canvas.RenderTransform> 
     <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139746" Fill="#FFD3BC5F" Canvas.Left="399.4" Canvas.Top="-172.6"> 
      <Path.Data> 
       <PathGeometry Figures="m 66.611178 552.33853 c -4.36996 0.6305 -8.8334 0.97293 -13.3752 0.97293 -18.11465 0 -35.027 -5.21161 -49.34949 -14.18974 l 21.64732 -36.67733 c 8.2963 5.25686 18.12667 8.31294 28.67512 8.31294 2.7121 0 5.37755 -0.20365 7.98106 -0.59283 l 2.23539 -0.38916 c 4.72288 -0.91109 9.2226 -2.43913 13.41755 -4.49964 l 35.933612 77.65818 c -12.53504 5.94167 -26.095762 10.06571 -40.347392 12.0342 0 0 -2.27764 -21.55688 -4.54327 -42.98252 l -2.2747 0.35297 z" FillRule="nonzero"/> 
      </Path.Data> 
     </Path> 
     <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Fill="#FFD3BC5F" Canvas.Left="401" Canvas.Top="-173" > 
      <Path.Data> 
       <PathGeometry x:Name="path139750" Figures="m -21.311892 515.98804 c -11.7053 -15.57594 -18.6547 -34.92004 -18.6622 -55.85694 l 35.53987 0 5.06525 -0.024 c 0.63507 11.4535 4.86922 21.94 11.58023 30.3706 l 1.44647 1.7423 c 2.94008 3.3894 6.29329 6.4077 9.98888 8.9736 l -43.53754 73.76488 c -13.18956 -8.30539 -24.88746 -18.76176 -34.60186 -30.87743 0 0 17.3968 -13.23944 34.61076 -26.3386 l -1.42986 -1.75428 z" FillRule="nonzero"/> 
      </Path.Data> 
     </Path> 
     <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139780" Fill="#FFD3BC5F" Canvas.Left="401.4" Canvas.Top="-167.6"> 
      <Path.Data> 
       <PathGeometry Figures="m 214.75854 460.1016 94.92962 0 0 69.86866 -94.92962 0 0 -69.86866 z" FillRule="nonzero"/> 
      </Path.Data> 
     </Path> 
     <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139784" Fill="#FFD3BC5F" Canvas.Left="401.4" Canvas.Top="-167.6"> 
      <Path.Data> 
       <PathGeometry Figures="m 211.64803 529.825 -36.87191 0 -62.32503 -69.72236 100.95576 0 0 69.74499 -1.75882 -0.0226 z" FillRule="nonzero"/> 
      </Path.Data> 
     </Path> 
     <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Fill="#FFD3BC5F" Canvas.Top="-173" Canvas.Left="401"> 
      <Path.Data> 
       <PathGeometry x:Name="path139798" Figures="m -41.482092 460.131 -43.5377 0 c 0.6744 30.93022 11.4414 59.36853 29.1278 82.17137 l 33.3799 -25.40184 c -11.9001 -15.82789 -18.9641 -35.4887 -18.97 -56.76953" FillRule="nonzero"/> 
      </Path.Data> 
     </Path> 
     <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139802" Fill="#FFD3BC5F" Canvas.Left="399.4" Canvas.Top="-172.6"> 
      <Path.Data> 
       <PathGeometry Figures="m 139.82292 494.54117 c -13.01467 -14.5593 -25.97803 -29.06131 -30.40076 -34.00892 0 0 -2.72123 28.49563 -29.566602 43.70507 l 17.54746 37.92328 c 19.158502 -10.35383 34.278952 -27.22704 42.419902 -47.61943" FillRule="nonzero"/> 
      </Path.Data> 
     </Path> 
     <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139806" Fill="#FFD3BC5F" Canvas.Left="399.4" Canvas.Top="-172.6"> 
      <Path.Data> 
       <PathGeometry Figures="m 98.037008 543.53024 17.776782 38.41802 c 23.1211 -11.42479 42.62202 -29.06882 56.29587 -50.76297 l 0.18403 -0.31676 c 0 0 -15.53072 -17.37553 -31.34655 -35.06934 -8.34762 20.43762 -23.62341 37.33197 -42.910132 47.73105" FillRule="nonzero"/> 
      </Path.Data> 
     </Path> 
     <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139810" Fill="#FFD3BC5F" Canvas.Left="399.4" Canvas.Top="-172.6"> 
      <Path.Data> 
       <PathGeometry Figures="m 53.235488 554.82033 c -18.39362 0 -35.56859 -5.28853 -50.11595 -14.3994 l -21.08756 35.73002 c 21.04842 12.78086 45.75185 20.14348 72.17809 20.14348 5.74697 0 11.40815 -0.36201 16.97265 -1.03931 l -4.37747 -41.4213 c -4.43321 0.63805 -8.96144 0.98651 -13.56976 0.98651" FillRule="nonzero"/> 
      </Path.Data> 
     </Path> 

<Rectangle Name="object_to_move" Fill="LightBlue" Height="36" Stroke="Black" Width="41" Canvas.Left="330" Canvas.Top="229"/>

ich will, ist zu animieren/die Box (Rechteck) auf dem Weg zu bewegen, sie (die Box) aussehen wie das Reisen und die Verwendung dieser (der Weg) als Straße zu bewegen machen.

Ich habe versucht mit DoubleAnimationUsingPath. Aber ich bin sehr verwirrt, und ich denke, ich verwende die Dinge nicht richtig.

Ich habe den folgenden Code snippt gefunden und versucht, es zu manipulieren und auf mein Beispiel anzuwenden, konnte es aber nicht funktionieren.

// path139798.Freeze(); // For performance benefits. 
     DoubleAnimationUsingPath daPath = new DoubleAnimationUsingPath(); 
     daPath.Duration = TimeSpan.FromSeconds(5); 
     daPath.RepeatBehavior = RepeatBehavior.Forever; 
     daPath.AccelerationRatio = 0.6; 
     daPath.DecelerationRatio = 0.4; 
     daPath.AutoReverse = true; 
     daPath.PathGeometry = path139798; 
     daPath.Source = PathAnimationSource.X; 
     circle2.BeginAnimation(Canvas.LeftProperty, daPath); 


     daPath = new DoubleAnimationUsingPath(); 
     daPath.Duration = TimeSpan.FromSeconds(5); 
     daPath.RepeatBehavior = RepeatBehavior.Forever; 
     daPath.AccelerationRatio = 0.6; 
     daPath.DecelerationRatio = 0.4; 
     daPath.AutoReverse = true; 
     daPath.PathGeometry = path139798; 
     daPath.Source = PathAnimationSource.Y; 
     circle2.BeginAnimation(Canvas.TopProperty, daPath); 
    }

Könnte jemand helfen. Vielen Dank!

Quelle

2016-04-26 user3641381

Ooooh, das sieht nach einem lustigen aus. Alles, was ich sehe, ist also path139798. Bedeutet das, dass du nur versuchst, es dem Pfad der unteren linken ersten Form folgen zu lassen, die diesen Namen hat? Es sieht fast so aus, als ob Sie mit den anderen Formen einen Irrgarten anfangen, also dachte ich, ich würde fragen, weil ich Schwierigkeiten habe, Ihr gewünschtes Ergebnis basierend auf Ihrer Erklärung zu visualisieren. –

@ChrisW. Hey Danke, dass du dir Zeit genommen hast und gefragt hast. Ich versuche, die Box entlang der Formen folgen zu lassen, die ich oben beschrieben habe, nur im Codebeispiel ist nur eine Form (Sie haben Recht), aber das Codebeispiel funktioniert nicht. Ich habe nur versucht, den Ausweg zu finden, indem ich nur einen Pfadnamen benutzte, um zu überprüfen, ob ich Dinge richtig gemacht habe, die ich nicht habe.Also noch einmal, alles was ich versuche, die Box entlang der Formen zu bewegen. – user3641381

Ok cool, du brauchst einen konsistenten Pfad, um deinen Bewegungspfad zu definieren, sorge dafür, dass du dieses Bild in Farbe oder etwas lädst und zeichne einfach eine grobe Linie, die das Rechteck als Pfad nehmen sollte? –

Sie haben also eine Menge seltsamer Ränder und Zeug auf Ihr Beispiel . Ich habe mich nicht zu sehr damit beschäftigt. Ich habe gerade einen Bewegungspfad hinzugefügt und bemerke das Storyboard, aber hier gehst du.

Quick Tipp: Blend (kommt mit Visual Studio) macht diese Art von Effekten wirklich schnell und einfach. In diesem Beispiel habe ich den Formpfad so gewählt, dass er zu Ihrem Mock-Bild passt. Dann ist es so einfach wie die Auswahl right-click -> Path -> Make Motion Path und Sie werden aufgefordert, das Objekt auszuwählen, um dem Pfad zu folgen. Es brauchte mehr Zeit, um Blend zu laden, als das Beispiel zu machen.

Hoffe das hilft, Prost.

<Canvas x:Name="Main" Height="1025 " Width="1025"> 
      <Canvas.Resources> 
       <Storyboard x:Key="Weeeee" RepeatBehavior="Forever"> 
        <DoubleAnimationUsingPath Duration="0:0:3" Source="X" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="object_to_move"> 
         <DoubleAnimationUsingPath.PathGeometry> 
          <PathGeometry Figures="M0.83299852,-4.019 L0.83299852,0.6089829 L0.61794496,0.94214186 C-7.6701996,14.489389 -12.443,30.392629 -12.443001,47.403001 C-12.443,96.887715 27.948303,137.003 77.773499,137.003 C113.58536,137.003 144.52365,116.27938 159.09367,86.248303 L159.90265,84.471135 L380.931,84.471135 L380.931,86.871121 L160.63918,86.871121 L160.4838,87.217053 C145.62575,118.25356 114.07582,139.671 77.556,139.671 C26.745804,139.671 -14.444,98.212666 -14.444,47.071218 C-14.444,29.491346 -9.5768454,13.055669 -1.124851,-0.94513857 z"/> 
         </DoubleAnimationUsingPath.PathGeometry> 
        </DoubleAnimationUsingPath> 
        <DoubleAnimationUsingPath Duration="0:0:3" Source="Y" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="object_to_move"> 
         <DoubleAnimationUsingPath.PathGeometry> 
          <PathGeometry Figures="M0.83299852,-4.019 L0.83299852,0.6089829 L0.61794496,0.94214186 C-7.6701996,14.489389 -12.443,30.392629 -12.443001,47.403001 C-12.443,96.887715 27.948303,137.003 77.773499,137.003 C113.58536,137.003 144.52365,116.27938 159.09367,86.248303 L159.90265,84.471135 L380.931,84.471135 L380.931,86.871121 L160.63918,86.871121 L160.4838,87.217053 C145.62575,118.25356 114.07582,139.671 77.556,139.671 C26.745804,139.671 -14.444,98.212666 -14.444,47.071218 C-14.444,29.491346 -9.5768454,13.055669 -1.124851,-0.94513857 z"/> 
         </DoubleAnimationUsingPath.PathGeometry> 
        </DoubleAnimationUsingPath> 
       </Storyboard> 
      </Canvas.Resources> 
      <Canvas.Triggers> 
       <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
        <BeginStoryboard Storyboard="{StaticResource Weeeee}"/> 
       </EventTrigger> 
      </Canvas.Triggers> 
      <Canvas.RenderTransform> 
       <MatrixTransform Matrix="1.25 0 0 -1.25 -197.1231 961.58875"/> 
      </Canvas.RenderTransform> 
      <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139746" Fill="#FFD3BC5F" Canvas.Left="399.4" Canvas.Top="-172.6"> 
       <Path.Data> 
        <PathGeometry Figures="m 66.611178 552.33853 c -4.36996 0.6305 -8.8334 0.97293 -13.3752 0.97293 -18.11465 0 -35.027 -5.21161 -49.34949 -14.18974 l 21.64732 -36.67733 c 8.2963 5.25686 18.12667 8.31294 28.67512 8.31294 2.7121 0 5.37755 -0.20365 7.98106 -0.59283 l 2.23539 -0.38916 c 4.72288 -0.91109 9.2226 -2.43913 13.41755 -4.49964 l 35.933612 77.65818 c -12.53504 5.94167 -26.095762 10.06571 -40.347392 12.0342 0 0 -2.27764 -21.55688 -4.54327 -42.98252 l -2.2747 0.35297 z" FillRule="nonzero"/> 
       </Path.Data> 
      </Path> 
      <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Fill="#FFD3BC5F" Canvas.Left="401" Canvas.Top="-173" > 
       <Path.Data> 
        <PathGeometry x:Name="path139750" Figures="m -21.311892 515.98804 c -11.7053 -15.57594 -18.6547 -34.92004 -18.6622 -55.85694 l 35.53987 0 5.06525 -0.024 c 0.63507 11.4535 4.86922 21.94 11.58023 30.3706 l 1.44647 1.7423 c 2.94008 3.3894 6.29329 6.4077 9.98888 8.9736 l -43.53754 73.76488 c -13.18956 -8.30539 -24.88746 -18.76176 -34.60186 -30.87743 0 0 17.3968 -13.23944 34.61076 -26.3386 l -1.42986 -1.75428 z" FillRule="nonzero"/> 
       </Path.Data> 
      </Path> 
      <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139780" Fill="#FFD3BC5F" Canvas.Left="401.4" Canvas.Top="-167.6"> 
       <Path.Data> 
        <PathGeometry Figures="m 214.75854 460.1016 94.92962 0 0 69.86866 -94.92962 0 0 -69.86866 z" FillRule="nonzero"/> 
       </Path.Data> 
      </Path> 
      <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139784" Fill="#FFD3BC5F" Canvas.Left="401.4" Canvas.Top="-167.6"> 
       <Path.Data> 
        <PathGeometry Figures="m 211.64803 529.825 -36.87191 0 -62.32503 -69.72236 100.95576 0 0 69.74499 -1.75882 -0.0226 z" FillRule="nonzero"/> 
       </Path.Data> 
      </Path> 
      <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Fill="#FFD3BC5F" Canvas.Top="-173" Canvas.Left="401"> 
       <Path.Data> 
        <PathGeometry x:Name="path139798" Figures="m -41.482092 460.131 -43.5377 0 c 0.6744 30.93022 11.4414 59.36853 29.1278 82.17137 l 33.3799 -25.40184 c -11.9001 -15.82789 -18.9641 -35.4887 -18.97 -56.76953" FillRule="nonzero"/> 
       </Path.Data> 
      </Path> 
      <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139802" Fill="#FFD3BC5F" Canvas.Left="399.4" Canvas.Top="-172.6"> 
       <Path.Data> 
        <PathGeometry Figures="m 139.82292 494.54117 c -13.01467 -14.5593 -25.97803 -29.06131 -30.40076 -34.00892 0 0 -2.72123 28.49563 -29.566602 43.70507 l 17.54746 37.92328 c 19.158502 -10.35383 34.278952 -27.22704 42.419902 -47.61943" FillRule="nonzero"/> 
       </Path.Data> 
      </Path> 
      <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139806" Fill="#FFD3BC5F" Canvas.Left="399.4" Canvas.Top="-172.6"> 
       <Path.Data> 
        <PathGeometry Figures="m 98.037008 543.53024 17.776782 38.41802 c 23.1211 -11.42479 42.62202 -29.06882 56.29587 -50.76297 l 0.18403 -0.31676 c 0 0 -15.53072 -17.37553 -31.34655 -35.06934 -8.34762 20.43762 -23.62341 37.33197 -42.910132 47.73105" FillRule="nonzero"/> 
       </Path.Data> 
      </Path> 
      <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139810" Fill="#FFD3BC5F" Canvas.Left="399.4" Canvas.Top="-172.6"> 
       <Path.Data> 
        <PathGeometry Figures="m 53.235488 554.82033 c -18.39362 0 -35.56859 -5.28853 -50.11595 -14.3994 l -21.08756 35.73002 c 21.04842 12.78086 45.75185 20.14348 72.17809 20.14348 5.74697 0 11.40815 -0.36201 16.97265 -1.03931 l -4.37747 -41.4213 c -4.43321 0.63805 -8.96144 0.98651 -13.56976 0.98651" FillRule="nonzero"/> 
       </Path.Data> 
      </Path> 

      <!-- Trajectory --> 
      <Path Data="M16.276999,1 L16.276999,5.627983 16.061945,5.9611419 C7.7738004,19.508389 3.0009999,35.41163 3.000999,52.422002 3.0009999,101.90672 43.392303,142.022 93.217499,142.022 129.02936,142.022 159.96765,121.29839 174.53767,91.267304 L175.34665,89.490136 396.375,89.490136 396.375,91.890122 176.08318,91.890122 175.9278,92.236054 C161.06975,123.27256 129.51982,144.69 93,144.69 42.189804,144.69 1,103.23167 1,52.090218 1,34.510346 5.8671546,18.07467 14.319149,4.0738615 z" Fill="#7F000000" Height="145.69" Canvas.Left="360.056" Stretch="Fill" Stroke="Red" StrokeThickness="2" Canvas.Top="236.648" Width="397.375"/> 

      <!-- Because I like to move it, move it ~~ --> 
      <Rectangle x:Name="object_to_move" Fill="LightBlue" Height="36" Stroke="Black" Width="41" Canvas.Left="355" Canvas.Top="223.667" RenderTransformOrigin="0.5,0.5"> 
       <Rectangle.RenderTransform> 
        <TransformGroup> 
         <ScaleTransform/> 
         <SkewTransform/> 
         <RotateTransform/> 
         <TranslateTransform/> 
        </TransformGroup> 
       </Rectangle.RenderTransform> 
      </Rectangle> 

     </Canvas>

... und ein beschissenes Qualitäts-GIF, um es für andere Zuschauer zu visualisieren.

Quelle

2016-04-27 21:59:00

Das ist so gut, Chris. Um den Pfad den Formen anzupassen, hast du ihn in Blend importiert und dann übergezogen? I Ich habe versucht, das zu reproduzieren, was du erklärt hast, aber ich war nicht in der Lage, es zu erledigen. Ich war nicht in der Lage zu finden "make motion path" -Option (Blend 5). Würdest du bitte helfen. Danke – user3641381

@ user3641381 Yea I habe einfach dein Xaml in den Blend und den vereinigten Teil einer Ellipse und eine Linie gebracht, um den Pfad zu erzeugen, den du siehst. Dann, wie gesagt, einfach mit der rechten Maustaste -> Pfad -> Bewegungspfad machen. Stellen Sie sicher, dass Sie den Pfad ausgewählt haben, wenn Sie das tun –

Awesome Hilfe, Chris. Hat es funktioniert! Letzte Frage. Wie hast du den Weg so glatt? Mit einigen Punkten konnte ich es nicht so glatt! Danke nochmal ! – user3641381

hier ein Arbeits Demo ist, die auf DoubleAnimationUsingPath

<Window.Resources> 
    <PathGeometry x:Key="AnimationPath" Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" /> 
</Window.Resources> 

<Grid> 
    <Canvas x:Name="Main" > 

     <!-- The Rectangle itself ... --> 

     <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path139746" Fill="#FFD3BC5F"> 
      <Path.Data> 
       <PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" /> 
      </Path.Data> 
     </Path> 


     <Rectangle 
    Width="30" Height="30" Fill="Blue"> 
      <Rectangle.RenderTransform> 
       <TransformGroup> 
        <RotateTransform x:Name="AnimatedRotateTransform" /> 
        <TranslateTransform x:Name="AnimatedTranslateTransform" /> 
       </TransformGroup> 
      </Rectangle.RenderTransform> 

      <Rectangle.Triggers> 
       <EventTrigger RoutedEvent="Path.Loaded"> 
        <BeginStoryboard> 
         <Storyboard RepeatBehavior="Forever" AutoReverse="True" > 

          <!-- Generates angle values (in degrees) from 
       the path. This animation is used to 
       rotate the rectangle. --> 
          <DoubleAnimationUsingPath 
      Storyboard.TargetName="AnimatedRotateTransform" 
      Storyboard.TargetProperty="Angle" 
      PathGeometry="{StaticResource AnimationPath}" 
      Source="Angle" 
      Duration="0:0:5" /> 

          <!-- Generates horizontal offset values from 
       the path. This animation is used to 
       animate the rectangle horizontally. --> 
          <DoubleAnimationUsingPath 
      Storyboard.TargetName="AnimatedTranslateTransform" 
      Storyboard.TargetProperty="X" 
      PathGeometry="{StaticResource AnimationPath}" 
      Source="X" 
      Duration="0:0:5" /> 

          <!-- Generates vertical offset values from 
       the path. This animation is used to move 
       the rectangle vertically. --> 
          <DoubleAnimationUsingPath 
      Storyboard.TargetName="AnimatedTranslateTransform" 
      Storyboard.TargetProperty="Y" 
      PathGeometry="{StaticResource AnimationPath}" 
      Source="Y" 
      Duration="0:0:5" /> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger> 
      </Rectangle.Triggers> 
     </Rectangle> 

    </Canvas> 
</Grid>

Wie Sie sehen können, etwas Licht könnte, folgt das Rechteck einen einzigen Weg .... Es wird path139798 folgen, aber es wird nicht richtig angezeigt Da das ein Polygon ist, wenn Sie möchten, dass das Rechteck der Mittellinie der Formen folgt (PathGeometry Figures), müssen Sie die Mittellinie für den Animationspfad definieren.

Quelle

2016-04-26 12:27:30 Monty

Ich werde dies versuchen und auf Sie zurückkommen. Danke, dass du dir Zeit genommen hast. Ich dachte daran, eine Linie für Animation zu definieren. Gibt es jedoch eine einfachere Möglichkeit, es zu definieren, als die Punkte manuell zu berechnen? Ich meine diese Figuren = "M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100' – user3641381

WPF: Animieren entlang der Pfadgeometrie

Antwort

Verwandte Themen