Эллипс Рисование WPF Анимация

Question

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

Мой вопрос - каков наилучший способ сделать это? Я проводил некоторые исследования и мог использовать анимацию WPF или GDI + для выполнения задач. Я новичок в анимации WPF, поэтому задаю вопрос.

Answer 1

WPF анимация делает это чрезвычайно легко. Вот основная техника:

1. Создайте визуальный внешний вид вашего эллипса, используя любые функции WPF, которые вам нравятся (фигуры, контуры, геометрия, кисти, рисунки, изображения и т. Д.). Это может быть простой эллипс или необычный рисунок, созданный вашим графическим дизайнером, или что-то среднее между ними.

2. Примените OpacityMask, состоящий из широкой эллиптической пунктирной линии с одной чертой нулевой длины. Поскольку черта имеет нулевую длину, весь пользовательский эллипс будет невидимым.

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

Общая структура раствора

Вот основная структура ControlTemplate:

<ControlTemplate TargetType="MyCustomControl">
  <Grid>

    <Rectangle Fill="{StaticResource EllipseVisualAppearance}">
      <Rectangle.OpacityMask>
        <VisualBrush>
          <VisualBrush.Visual>
            <Ellipse
              x:Name="opacityEllipse"
              StrokeDashArray="0 10"
              Stroke="Black" StrokeThickness="0.5"
              Width="1" Height"1" />
          </VisualBrush.Visual>
        </VisualBrush>
      </Rectangle.OpacityMask>
    </Rectangle>

    <ContentPresenter />   <!-- This presents the actual content -->

  </Grid>
</ControlTemplate>

Создание изображения эллипса

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

Нарисуйте свой эллипс точно так, как вы хотите, чтобы он отображался с использованием любой техники рисования WPF. В зависимости от того, сколько «художественного стиля» вы хотите получить от эллипса, вы можете сделать простой (и скучный) поглаженный эллипс или что угодно произвольно причудливое, например:

• Проложить путь, который примерно эллипс, но не закрыт и, возможно, вспыхнул.
• Заполните путь, созданный графическим дизайнером, который начинается так, как если бы это делала кисть, и, возможно, становится шире, когда вы идете по кругу, и заканчивается шариком.
• Создайте векторный рисунок в Expression Design (или Adobe Illustrator), преобразуйте его в чертеж XAML.
• Создание растрового изображения (обратите внимание, что в целом растровые изображения имеют недостатки точности и производительности по сравнению с векторными рисунками)
• Нарисуйте несколько фигур на холсте, используя Expression Blend

Вот в конечном итоге простой эллипс:

<VisualBrush x:Key="EllipseVisualAppearance">
  <VisualBrush.Visual>
    <Ellipse StrokeThickness="0.1" Stroke="Blue" />
  </VisualBrush.Visual>
</VisualBrush>

Анимация вашего эллипса

Опять же, есть множество способов сделать это, в зависимости от того, как вы хотите, чтобы ваша анимация выглядела. Для простой анимации от 0 до 360 ваша DoubleAnimation может быть простой:

 <DoubleAnimation
   StoryBoard.TargetName="opacityEllipse"
   StoryBoard.TargetProperty="StrokeDashArray[0]"
   From="0" To="3.1416" Duration="0:0:0.5" />

Константа 3.1416 немного больше числа pi, которое является окружностью круга диаметром 1. Это означает, что эллипс будет полностью виден только в конце продолжительности анимации.

Альтернативное решение

Пользователь StackOverflow Саймон Фокс опубликовал ответ, содержащий ссылку на эту статью Чарльза Петцольда , но его ответ исчез через несколько минут. Я думаю, он удалил это. Код Петцольда показывает более простой способ сделать это, используя PathGeometry и ArcSegment. Если все, что вам нужно, это простой эллипс без излишеств, то, вероятно, стоит смоделировать код на его примере.