Анимация различий между двумя путями

Я не знаю, можно ли сделать то, что я думаю, или нет, но я ничего не нашел в Интернете, поэтому мне нужно спросить об этом здесь.

У меня есть два объекта Path на моей странице XAML, но каждый раз я показываю только один из них.

Они представляют собой 2 разных смайлика, улыбающееся лицо и грустное.

Что мне нужно сделать, так это какую-то интерполяцию между путями, чтобы анимировать переход от счастливого лица к грустному и наоборот.

Анимация — это не статическая анимация, которая воспроизводится только один раз, а скорее постепенная анимация, которая следует некоторым данным в моей модели представления.

Допустим, у меня есть TimeSpan, и лицо на 100% грустно в 00:00:00, а на 100% счастливо в 06:00:00.

Учитывая это 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. Поскольку вопрос довольно необычный, не стесняйтесь оскорблять меня, но по крайней мере попытайтесь указать мне правильное направление :)


storyboard xaml win-universal-app windows-phone-8.1
person StepTNT    schedule 27.10.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Автоматической интерполяции между путями нет, но есть несколько способов приблизиться к этому.

Самый простой способ — поместить оба пути в визуальное дерево, установить непрозрачность первого на 1,0 и непрозрачность второго на 0,0, а затем анимировать непрозрачность для изменения и плавного перехода между изображениями.

Следующим самым простым было бы создать несколько промежуточных кадров и переключаться между ними.

Для коротких анимаций любой из них, вероятно, довольно хорош. Для чего-то, пока вы говорите, это было бы довольно странно.

Чтобы выполнить полное преобразование, вам нужно использовать код, а не xaml. Определите совпадающие точки на каждом изображении, чтобы вы знали, какие точки представляют глаза, нос, рот и т. д. Для простых фигур, таких как ваши лица, у вас может быть совпадение один: один между точками на начальном и конечном пути, и вы можете просто интерполировать их. координаты.

Если вы можете нарисовать счастливые и грустные лица с одинаковыми точками в одном и том же порядке, только в разных местах, то это будет довольно просто: прокрутите фигуры и сегменты и создайте новый набор с точками, интерполированными между точками счастья. и точка грусти в настоящее время.

Если точки на двух путях не представляют одни и те же части изображения, это сложнее. Вам нужно будет создать сопоставление между счастливыми точками и печальными точками, чтобы вы знали, куда перемещается каждая точка в новой версии: глаза перемещаются к глазам, рты к ртам и т. д.

person Rob Caplan - MSFT    schedule 27.10.2014
comment
Я понял вашу точку зрения, и это кажется единственным способом сделать то, что я пытался сделать, даже если мы говорим о чем-то непростом. Я попробую ваши идеи позже, но я приму ваш ответ сейчас, потому что это имеет смысл для меня, спасибо. - person StepTNT; 28.10.2014