WPF：沿路徑幾何動畫

我現在正在處理以下問題一週。請解釋一下我的看法。WPF：沿路徑幾何動畫

我正在努力實現的是，對於我們中的一些人來說，非常簡單，但對於WPF來說新手會讓事情變得艱難。

上面的圖片是通過轉換渲染（已有）svg到xaml事後其導入到Visual Studio。這就是xaml的樣子。

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

我要的是動畫/沿着路徑移動的方塊（矩形），使得它（箱子）看起來像旅行和使用它（路徑）的道路繼續前進。

我試過使用DoubleAnimationUsingPath。但是我很困惑，我認爲我沒有正確地使用東西。

我發現了下面的代碼snippt，並試圖操縱它並將其應用於我的示例，但無法使其工作。

// 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); 
    }

有人可以幫忙。謝謝！

來源

2016-04-26 user3641381

Ooooh，這看起來很有趣。所以我看到的全部是path139798。這是否意味着你只是試圖讓它遵循那個有這個名字的左下第一個形狀的路徑？它幾乎看起來像你有一個與其他形狀的迷宮的開始，所以我想我會問，因爲我很難根據你的解釋來想象你想要的結果。 –

@ChrisW。嘿，感謝您抽出寶貴時間並提問。我試圖讓盒子沿着上面描述的形狀走向前進，只有在代碼示例中只有一個形狀（您是對的），但是代碼示例不起作用。我只是想通過只使用1個路徑名來確定我有沒有正確的東西。所以，我試圖讓盒子沿着形狀移動。 – user3641381

好的，你需要一個一致的路徑來定義你的運動路徑，注意把你的圖片加載到繪畫或者其他東西上，然後畫出一個粗糙的線條，矩形應該採取的路線？ –

所以你有很多奇怪的邊距和東西你的榜樣。我沒有太多惹它。我剛剛添加了一個運動路徑，並注意到Storyboard，但是在這裏你走了。

快速提示：Blend（自帶視覺工作室）使這些效果非常快速和簡單。對於這個例子，我只是將形狀路徑與你的模擬圖像相匹配。然後就像選擇它然後right-click -> Path -> Make Motion Path一樣簡單，它會提示您選擇要追蹤路徑的對象。花了更多時間來加載Blend，然後它做了這個例子。

希望這會有所幫助，歡呼聲。

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

...和一個蹩腳的質量GIF可視化爲其他觀衆。

來源

2016-04-27 21:59:00

這很好，Chris。爲了讓路徑與形狀相匹配，你是否將它導入混合而不是將它導入？I試圖複製你所解釋的內容，但是我無法完成它，我無法找到'make motion path'選項（Blend 5）。請你幫忙。謝謝 – user3641381

@ user3641381 Yea I只是將你的xaml融入到了一個橢圓和線的一部分中，並創建了你看到的路徑，然後如我剛纔所說的右鍵單擊 - > Path - > Make Motion Path。我還使用了VS2015中的新的Blend，請確保你在這樣做的時候選擇了路徑 –

真棒幫助，克里斯。得到它的工作！最後一個問題。你是如何得到路徑如此流暢？有一些針點我沒有得到它順利！再次感謝！ – user3641381

這裏的工作演示，可能揭示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>

正如你所看到的，矩形遵循單一路徑....這將遵循path139798但它不會看的權利因爲那是一個多邊形，如果你想讓矩形沿着形狀的中心線（PathGeometry Figures），你將需要定義動畫路徑的中心線

來源

2016-04-26 12:27:30 Monty

我會盡力回覆你。感謝您抽出時間。我正在考慮爲動畫定義一條線。但是，除了手動計算點數外，是否有更簡單的方法來定義它？我的意思是這個'Figures ='M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100' – user3641381

WPF：沿路徑幾何動畫

回答

相關問題