兩條路徑之間的動畫差異

Question

如果我認爲可以做或不做，但我沒有在網上找到任何東西，所以我需要在這裏問它。

我在XAML網頁在兩次Path對象，但我展示每一次他們的只有一個。

他們代表2個不同的表情，一個笑臉和一個傷心的表情。

我需要做的是在從幸福的臉到悲傷的人和反之間轉換的動畫路徑之間的某種插值。

該動畫不是一個只播放一次的靜態動畫，而是一個漸進式動畫，它遵循我的視圖模型中的一些數據。

假設我有TimeSpan，在00:00:00時臉部100％傷心，而06:00:00則100％高興。

鑑於這種2路：

路徑1

<Path Data="M32,39.704002C39.487766,39.704002 46.095413,43.433239 50.098,49.125999 44.997589,45.458061 38.76125,43.27314 32,43.27314 25.23875,43.27314 19.002413,45.458061 13.902,49.125999 17.904589,43.433239 24.512236,39.704002 32,39.704002z M41.9907,22.009001C44.746445,22.009001 46.986,24.246023 46.986,27.00515 46.986,29.763077 44.746445,32 41.9907,32 39.234856,32 36.996002,29.763077 36.996002,27.00515 36.996002,24.246023 39.234856,22.009001 41.9907,22.009001z M22.00955,22.009001C24.765379,22.009001 27.005001,24.246023 27.005001,27.00515 27.005001,29.763077 24.765379,32 22.00955,32 19.253624,32 17.014,29.763077 17.014,27.00515 17.014,24.246023 19.253624,22.009001 22.00955,22.009001z M32,4.9947796C17.110001,4.9947801 4.99547,17.109301 4.99547,32 4.99547,46.890701 17.110001,59.005199 32,59.005199 46.889999,59.005199 59.005199,46.890701 59.005199,32 59.005199,17.109301 46.889999,4.9947801 32,4.9947796z M32,0C49.673199,0 64,14.3268 64,32 64,49.673199 49.673199,64 32,64 14.3268,64 0,49.673199 0,32 0,14.3268 14.3268,0 32,0z" Stretch="Uniform" Fill="#FFFFFFFF" Width="276" Height="276" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5"/> 

路徑2

<Path Data="M13.613,38.875C18.607058,42.467495 24.713106,44.60701 31.333448,44.60701 37.953793,44.60701 44.05994,42.467495 49.054001,38.875 45.13483,44.449402 38.665386,48.102001 31.333448,48.102001 24.001511,48.102001 17.532166,44.449402 13.613,38.875z M41.115601,21.551001C43.814354,21.551001 46.007,23.740988 46.007,26.44265 46.007,29.143013 43.814354,31.333 41.115601,31.333 38.417046,31.333 36.224998,29.143013 36.224998,26.44265 36.224998,23.740988 38.417046,21.551001 41.115601,21.551001z M21.551451,21.551001C24.249977,21.551001 26.442001,23.740988 26.442001,26.44265 26.442001,29.143013 24.249977,31.333 21.551451,31.333 18.852722,31.333 16.66,29.143013 16.66,26.44265 16.66,23.740988 18.852722,21.551001 21.551451,21.551001z M31.333448,4.8906832C16.753281,4.8906832 4.8913631,16.753981 4.8913627,31.333448 4.8913631,45.913017 16.753281,57.776276 31.333448,57.776276 45.913719,57.776276 57.775574,45.913017 57.775574,31.333448 57.775574,16.753981 45.913719,4.8906832 31.333448,4.8906832z M31.333448,0C48.638233,-3.5527137E-15 62.666996,14.028767 62.666996,31.333448 62.666996,48.638233 48.638233,62.666996 31.333448,62.666996 14.028767,62.666996 -3.5527137E-15,48.638233 0,31.333448 -3.5527137E-15,14.028767 14.028767,-3.5527137E-15 31.333448,0z" Stretch="Uniform" Fill="#FFFFFFFF" Width="276" Height="276" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5"/> 

我怎樣才能使這項工作？

P.S. 由於這個問題是非常不尋常的，請隨時侮辱我，但至少試圖指向我的正確方向:)

Answer 1

路徑之間沒有任何自動插值，但有幾種方法可以解決這個問題。

最簡單的方法是將兩個路徑放置在可見樹中，將第一個的不透明度設置爲1.0，將第二個的不透明度設置爲0.0，然後對不透明度設置動畫以在圖像之間改變和淡入淡出。

下一個最簡單的是創建若干中間幀，並將它們

之間切換，對於動畫短片任一可能是相當不錯的。對於只要你說話的事情，它會非常奇怪。

要做一個完整的變形，你需要使用代碼而不是xaml。識別每幅圖像中的匹配點，以便知道哪些點代表眼睛，鼻子，嘴巴等等。對於簡單的形狀（如臉部），可能會有一個匹配點：開始路徑和結束路徑中的點之間有一個匹配，並且可以簡單地插入它們座標。

如果你可以用相同的順序繪製同樣的點的快樂和悲傷的面孔，只是在不同的位置，那麼它會很容易：循環的數字和段，並創建一個新的點與點插入當前時間的開心點和傷心點之間。

如果兩個路徑中的點不代表圖像的相同部分，那麼它更復雜。您需要在快樂點和悲傷點之間創建一個映射，以便您知道新版本中每個點的移動位置：眼睛移動到眼睛，嘴巴和嘴巴等。