Почему не получается сделать анимацию цвета?

Question

[DarkByte2015]

<Ellipse>
    <Ellipse.Style>
        <Style TargetType="Ellipse">
            <Style.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard TargetProperty="Fill">
                                <ColorAnimation To="Yellow" Duration="0:0:3" RepeatBehavior="Forever" AutoReverse="True"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Ellipse.Style>
    <Ellipse.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard TargetProperty="Fill">
                        <ColorAnimation To="Yellow" Duration="0:0:3" RepeatBehavior="Forever" AutoReverse="True"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Ellipse.Triggers>
</Ellipse>

Несколько вопросов: во первых как правильнее триггер прямо от эллипса или триггер от стиля? Я и так и так попробовал, но че то не работает... Во вторых как быть если в общем то никакое конкретное событие не нужно? Просто нужно чтобы была бесконечная анимация. Я поставил событие Loaded, но хз... Ну и в третьих все таки почему не работает анимация?

Answer 1

[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мс после первого.

Comments

[DarkByte2015]

Спасибо почти то что надо. Скажите а можно сделать чтобы была не плавная анимация, а как то так: 3 секунды прошло, моргнуло красным и обратно сменилось и т.д. бесконечно.

[kestik]

DarkByte2015: обновил ответ с примером моргания.

Answer 2

[#алгоптимизируй #отботизируй]

Покажите полную разметку.
-------------------------------------------
Под отладчиком исключение (полная разметка)
-------------------------
Первая ссылка в гугле
https://www.google.ru/?client=opera#newwindow=1&q=...
stackoverflow.com/questions/2248726/wpf-coloranima...
Как в примере указал, все ок.
Ссылка об использовании гугла toster.ru/q/320815

Comments

[DarkByte2015]

Это полная, куда полнее то?

[#алгоптимизируй #отботизируй]

Открываете *.xaml ctrl+a ctrl+c ctrl+v

[DarkByte2015]

С Sharp: а что это такая проблема создать новый проект и скопировать туда код моего эллипса? Ну ладно я сделаю это сам: pastebin.ru/irjF0SP0 .

[DarkByte2015]

С Sharp: шутник вы однако. Я и без вас умею пользоваться гуглом. Если я спрашиваю попрошу отвечать по существу или совсем не отвечать. Дизлайк.

[#алгоптимизируй #отботизируй]

Только что сказал жене, что ответ будет - "Я умею пользоваться гуглом". Как понимаете, ржач был на всю квартиру после прочтения вашего ответа.
Я вам по-доброму намекнул - изучите базу, пользуйтесь гуглом, отладчиком.

Выше написано, что ваш код кидает исключение, чуть ниже ссылка с решением проблемы. Не посуществу? Ну нет, так нет, ждите другого ответа.

[DarkByte2015]

С Sharp: Печально что у вас напрочь отсутствует чувство юмора. У меня никакого исключения не кидает. А по вашей ссылке вперемежку visual basic который я не знаю и c# в котором я просто не хочу разбираться потому что привык пользоваться разметкой. Если хотите помочь не посылайте никого в гугл, а пишите нормальный ответ. И вообще я не знаю как конкретно на этом форуме но на многих других за посылы в гугл уже и наказания дают. Ответ кстати репортнул.

[#алгоптимизируй #отботизируй]

Там есть пример решения на c# . Вам лень внимательно прочитать пару ответов, чтобы решить свою проблему?