Ответы пользователя по тегу WPF
  • Почему не получается сделать анимацию цвета?

    @kestik
    Вы пытаетесь анимировать свойство Fill при помощи ColorAnimation, но это свойство, в случае заливки круга сплошным цветом, содержит в себе SolidColorBrush. В свою очередь, SolidColorBrush содержит свойство Color, которое вы можете анимировать, используя ColorAnimation.
    Вот Ваш исправленный пример:
    <Ellipse Width="50" Height="50" Fill="#fff">
        <Ellipse.Triggers>
            <EventTrigger RoutedEvent="Ellipse.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)" To="Yellow" Duration="0:0:3" RepeatBehavior="Forever" AutoReverse="True"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Ellipse.Triggers>
    </Ellipse>


    Пример с мигающим кругом:
    <Ellipse Width="50" Height="50" Fill="White">
      <Ellipse.Triggers>
        <EventTrigger RoutedEvent="Ellipse.Loaded">
          <BeginStoryboard>
            <Storyboard>
              <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)" RepeatBehavior="Forever" FillBehavior="Stop">
                <DiscreteColorKeyFrame Value="Red" KeyTime="0:0:3"/>
                <DiscreteColorKeyFrame Value="White" KeyTime="0:0:3.1"/>
              </ColorAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Ellipse.Triggers>
    </Ellipse>


    Пояснения по второму примеру:
    ColorAnimationUsingKeyFrames — анимация цвета при помощи ключевых кадров на временной шкале.
    Свойство FillBehavior="Stop" возвращает объект в исходное состояние после окончания анимации.

    DiscreteColorKeyFrame — ключевой кадр анимации цвета без плавных переходов между кадрами.
    Свойство Value задает необходимое значение для анимируемого свойства (в данном случае это свойство — Fill).
    Свойство KeyTime задает положение ключевого кадра на временной шкале.

    Свойство KeyTime второго ключевого кадра анимации задает продолжительность видимости красного цвета. В данном примере продолжительность равна 100мс, потому как второй ключевой кадр активируется через 100мс после первого.
    Ответ написан
    2 комментария