Xaml 为两条路径之间的差异设置动画

我不知道我认为什么可以做或不可以，但我还没有找到任何在线，所以我需要问一下这里

我的XAML页面中有两个

Path

对象，但每次只显示其中一个

它们代表两种不同的表情，一个笑脸和一个悲伤的表情

我需要做的是在路径之间进行某种插值，以动画化从快乐的脸到悲伤的脸的过渡，反之亦然

动画不是一个只播放一次的静态动画，而是一个循序渐进的动画，跟随视图模型中的一些数据

假设我有一个

时间跨度

，脸在

00:00:00

时100%悲伤，而在

06:00:00

时100%快乐

考虑到这两条路径：

路径1

路径2

我怎样才能做到这一点

附言。

---

由于这个问题很不寻常，请随意侮辱我，但至少试着给我指出正确的方向：）

路径之间没有任何自动插值，但有几种方法可以实现这一点

最简单的方法是将两条路径放置在视觉树中，将第一条路径的不透明度设置为1.0，将第二条路径的不透明度设置为0.0，然后设置不透明度的动画以在图像之间进行更改和交叉淡入淡出

下一个最简单的方法是创建几个中间帧并在它们之间切换

简而言之，这两种动画都很不错。只要你还在说话，那就很奇怪了

要进行完全变形，您需要使用代码而不是xaml。识别每个图像中的匹配点，以便您知道哪些点代表眼睛、鼻子、嘴巴等。对于像您的脸这样的简单形状，您可以在起始路径和结束路径中的点之间进行一对一匹配，并且可以简单地插值其坐标

如果你能以相同的顺序画出相同点的快乐和悲伤的脸，只是位置不同，那就很容易了：在人物和片段之间循环，并创建一个新的集合，其中点在当前时间在快乐点和悲伤点之间插值

---

如果两条路径中的点不代表图像的相同部分，那么它就更复杂了。你需要在快乐点和悲伤点之间创建一个映射，这样你就可以知道新版本中每个点的移动位置：眼睛到眼睛，嘴巴到嘴巴，等等。

我明白你的意思，这似乎是做我想做的事情的唯一方法，即使我们在谈论一些不容易的事情。我稍后会尝试你的想法，但我现在会接受你的答案，因为这对我来说很有意义，谢谢。

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

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