Question

我不知道我认为可以做什么，但我没有在网上找到任何东西，所以我需要在这里提问。

我的 XAML 页面中有两个Path个对象，但我每次只显示其中一个。

他们代表两种不同的表情，一张笑脸和一张悲伤的表情。

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

动画不是只播放一次的静态动画，而是在视图模型中跟随某些数据的渐变动画。

让我们说我TimeSpan 00:00:00，06:00:00面对100％感到悲伤，而<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"/>感到满意

鉴于这两条路径：

PATH1

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

PATH2

{{1}}

我该如何做到这一点？

P.S。既然这个问题很不寻常，请随意侮辱我，但至少要试着指出正确的方向：）

Answer 1

路径之间没有任何自动插值，但有几种方法可以解决这个问题。

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

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

对于短动画，其中任何一个都可能相当不错。只要你在谈论它就会非常奇怪。

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

如果你可以用相同的顺序绘制同一点的快乐和悲伤的面孔，只是使用不同的位置，那么它将非常简单：循环遍历图形和线段并创建一个带有插值点的新集合在当前时间的快乐点和悲伤点之间。

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

动画两个路径之间的差异

1 个答案: