D
D
DarkByte20152016-05-18 19:43:30
WPF
DarkByte2015, 2016-05-18 19:43:30

Why can't I animate the color?

<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>

A few questions: firstly, what is the correct trigger directly from the ellipse or the trigger from the style? I tried this and that, but it doesn’t work ... Secondly, what if, in general, no specific event is needed? It just needs an infinite animation. I set the Loaded event, but xs... And thirdly, why doesn't the animation work?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
K
kestik, 2016-05-19
@DarkByte2015

You are trying to animate the Fill property with a ColorAnimation, but that property, in the case of a circle being filled with a solid color, contains a SolidColorBrush. In turn, SolidColorBrush contains a Color property that you can animate using ColorAnimation.
Here is your corrected example:

<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>

Flashing circle example:
<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>

Explanations for the second example:
ColorAnimationUsingKeyFrames - color animation using keyframes on the timeline.
The FillBehavior="Stop" property returns the object to its original state after the animation ends.
DiscreteColorKeyFrame - A color animation keyframe with no smooth transitions between frames.
The Value property specifies the desired value for the property being animated (in this case, the property is Fill).
The KeyTime property specifies the position of a keyframe on the timeline.
The KeyTime property of the second keyframe of the animation sets how long the red color is visible. In this example, the duration is 100ms because the second keyframe is activated 100ms after the first.

#
#algooptimize #bottize, 2016-05-18
@user004

Show full markup.
-------------------------------------------
Exception under debugger (full markup)
------------------------
The first link in Google
https://www.google.ru/?client=opera#newwindow=1&q=..
stackoverflow.com/questions/2248726/wpf-coloranima...
As indicated in the example, everything is ok .
Link about using Google toster.ru/q/320815

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question