Отрывистые анимации в WPF

Question

У меня есть отрывочная анимация в WPF, моя форма WPF выглядит следующим образом:

Окно 1280x800 содержит сетку 2400x7 **, разделенную на 3 столбца.

• Столбец 1 * ширина
• Колонка 2 имеет ширину 148
• Столбец 3 * ширина

Это позволяет мне с помощью анимации изменить поле сетки до ~ -1000 с левой стороны, чтобы вывести левый столбец за пределы экрана, переместить средний столбец в крайнее правое положение и затем переместить самый правый столбец на экране (Думайте об этом как о дизайне панорамирования на 2 страницы.)

Это все замечательно, но мои компоненты экрана анимируются на разных скоростях, когда я перемещаю их влево / вправо, есть ли способ по существу удвоить всю мою область рисования и панорамировать все это вместе? или это против духа WPF.

Answer 1

Другой подход к расследованию:

Вместо раскадровки в XAML используйте

CompositionTarget.Rendering

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

thatBigGrid.UpdateLayout();

Маржа - это свойство, которое влияет на макет. Когда Margin of the Grid изменяется во время анимации, функция Arrange ставится в очередь, выполняется и внутри позиции Arrange каждого дочернего элемента Grid будет обновляться в цикле. Если рендеринг для следующего кадра начинается в середине этого процесса, некоторые элементы будут отображаться в новых позициях, а некоторые - в старых, что приведет к рывкам.

Если именно так и происходит, решение вручную контролирует событие рендеринга и обеспечивает полное обновление макета перед рисованием.

Answer 2

Я проверил ваш код и могу подтвердить забавный переход. Однако анимация отстает только при движении вправо.

Когда я заменил ваш веб-браузер на цветную рамку, задержка исчезла.

Таким образом, можно сделать вывод, что проблема заключается в медленном рендеринге внешнего размещенного визуала. WebBrowser - это элемент интерфейса взаимодействия, унаследованный от HwndHost .

Так что это определенно не имеет ничего общего с XAML, я думаю, что вы застряли с производительностью, как она есть.

Answer 3

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

• При нажатии кнопки визуализируйте всю сетку в RenderTargetBitmap.
• Рисование результирующего изображения (RenderTargetBitmap наследуется от BitmapSource) в некотором прямоугольнике над сеткой.
• Скрыть фактическую сетку.
• Анимация растрового изображения, перемещение скрытой сетки на новую позицию
• Показать сетку
• Скрыть растровое изображение

Что касается духа WPF, то его можно назвать необходимым злом. Например, вы можете заметить, как изменяется рендеринг текста в самом WPF во время прокрутки - использование RenderTargetBitmap не хуже.

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