Jerky Анимация в WPF

Question

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

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

• Колонка 1 * ширина
• Колонка 2 148 Ширина
• Колонка 3 * ширина

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

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

Answer 1

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

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

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

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

Answer 2

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

Когда я заменил ваш WebBrowser цветной границей, отставание исчезло.

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

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

Answer 3

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

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

CompositionTarget.Rendering 

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

thatBigGrid.UpdateLayout(); 

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

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