Эллипс, привлекающий анимацию WPF

Благодаря анимации 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>

Анимация вашего ellipse

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

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

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

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

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