WPF. XAML. Как исправить/усовершенствовать анимацию?

Вопрос 1
У меня есть кнопка со своим стилем, на кнопке картинка (шестеренка). В стиле я сделал так чтобы картинка вращалась при наведении. Вопрос, как в XAML (именно в XAML, в коде, конечно, я могу все вручную сделать, но не хочу его излишне усложнять) реализовать чтобы анимация вращения проигрывалась когда курсор над кнопкой, но когда он покидает кнопку, то проигрывалась до тех пор пока шестеренка не окажется в нормальном положении (0 градусов, если считать от верхнего зубца).

Сейчас я сделал анимацию через два триггера, MouseEnter и MouseLeave. В MouseEnter в бесконечной анимации поворачиваю картинку на 60 градусов (на расстояние между зубцами, 360 / 6 (кол-во зубцов)), а в MouseLeave возвращаю его в 0 положение. Но из-за этого возникает не очень красивый эффект, когда курсор покидает кнопку, то картинка поворачивается назад, переводя верхний правый зубец в верхнее положение. А я хочу чтобы картинка продолжала поворот в том же направлении и остановилась на верхнем левом зубце. На гифке текущая анимация:
393e9de957544d06b0f7c31dd61bfacf.gif

---

Вопрос 2
Также я заметил один баг (?) когда при наведении курсора к границам кнопки одновременно проигрывается анимация MouseEnter и MouseLeave, что заставляет кнопку дергаться. Предполагаю что это происходит из-за того что кнопка (Rectangle, в моём стиле) квадратная, и во время проигрывания анимации курсор то попадает на область кнопки, то нет. Ниже приведена гифка:
152b26179cbb43c4b03e93357501df18.gif

Также обнаружилась ещё одна непонятная штука. Кнопка, в стиле, у меня находится в Grid (для одного Rectangle это не нужно, просто я тестировал различные варианты), так вот, если задать для Grid фон (background), без разницы какой, то анимация отрабатывает корректно, сразу как курсор входит/выходит из области кнопки. Гифка для демонстрации:
b556aa8315bb4bfdb5f2a0e1f0810dae.gif

Не пойму как фон Grid'a влияет на его размеры (выше я писал что предполагаю в том что курсор входит/выходит из области кнопки) и почему задание ему фона решает эту проблему. Я не хочу дополнительно в Grid'e задавать цвет фона, т.к. он может изменится, конечно можно просто "прибиндить" его, но мне кажется что это неправильно. Мне нужен прозрачный (но отображающий содержащуюся в нём кнопку) Grid, который будет корректно отображать с анимацию.
  • Вопрос задан
  • 792 просмотра
Решения вопроса 1
@i_light
Backend, XAML, crossplatform
(банальный костыль)
Пробовали задать OpacityMask того же цвета, что и фон?
Чтобы фон как бы был, но 100% прозрачный.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы