Почему, когда та же самая анимация запускается до того, как предыдущая закончилась, исчезновение не работает?

Question

У меня есть следующая простая анимация:

<Window x:Class="AnimationTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel Background="Black">
        <TextBox Name="Box" >

        </TextBox>
        <TextBlock Text="{Binding Text, ElementName=Box, NotifyOnTargetUpdated=True}"  Foreground="White" >
            <TextBlock.Style>
                <Style TargetType="TextBlock"  >
                    <Style.Triggers>
                        <EventTrigger RoutedEvent="Binding.TargetUpdated">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation AutoReverse="True" To="#A933FF" Duration="0:0:1" Storyboard.TargetProperty="Foreground.Color" FillBehavior="Stop" IsCumulative="True" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </StackPanel>
</Window>

Это только делает вспышку значением, когда значение изменяется. если вы пишете письмо, вы видите, что оно правильно мигает в соответствии с цветом, заданным в анимации, и возвращается назад. Но если вы щелкнете несколько раз, продолжительность будет больше (что является желаемым поведением), но затем она перейдет к исходному цвету, не исчезая. Почему это происходит и как этого избежать?

Answer 1

Итак, еще раз, у нас есть вопрос, где пользователь предоставляет некоторый код и говорит, почему это происходит? Ответ в этом случае является нормальным ответом на эти вопросы:

Вы написали некоторый код, чтобы это произошло

Итак, чтобы копнуть немного глубже, вы спросили:

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

Во-первых, почему это происходит?

Так что причина, по которой это происходит, заключается в том, что вы объявили ColorAnimation это не имеет From значение установлено, поэтому оно всегда будет начинаться с текущего значения, независимо от того, было ли это значение изменено Animation или нет:

<ColorAnimation AutoReverse="True" To="#A933FF" Duration="0:0:1" FillBehavior="Stop" 
    Storyboard.TargetProperty="Foreground.Color" IsCumulative="True" />

Для одного введенного символа вы увидите ColorAnimation как ты и ожидал. Однако, когда вы непрерывно печатаете дополнительные символы, он уже достигнет установленного вами фиолетового цвета, и вы не увидите больше анимации, пока не прекратите печатать, потому что теперь он пытается анимировать от вашего фиолетового цвета до того же фиолетового цвета.

Теперь, как этого избежать?

Чтобы решить эту проблему, либо предоставьте From цвет или установить Duration быть намного быстрее, или предпочтительно оба:

<ColorAnimation AutoReverse="True" From="White" To="#A933FF" Duration="0:0:0.1" 
    Storyboard.TargetProperty="Foreground.Color" FillBehavior="Stop" 
    IsCumulative="True" />

Answer 2

Вы можете достичь желаемого результата, используя ColorAnimationUsingKeyFrames это даст вам гораздо более точный контроль над тем же с использованием ключевых кадров, вместо того, чтобы полностью изменить двойную анимацию, которая теряет исходное значение после многократного вызова, и остановка FillBehavior заставляет его вернуться к исходному значению в результате завершения анимации.

образец для вас

<TextBlock Text="{Binding Text, ElementName=Box, NotifyOnTargetUpdated=True}"  Foreground="White" >
    <TextBlock.Style>
        <Style TargetType="TextBlock">
            <Style.Triggers>
                <EventTrigger RoutedEvent="Binding.TargetUpdated">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames Duration="0:0:2" Storyboard.TargetProperty="Foreground.Color" >
                                <SplineColorKeyFrame Value="#A933FF"/>
                                <SplineColorKeyFrame Value="White" KeyTime="0:0:1"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </TextBlock.Style>
</TextBlock>

Более чистый подход предполагает остановку предыдущей раскадровки и вызов новой

<TextBlock Text="{Binding Text, ElementName=Box, NotifyOnTargetUpdated=True}"  Foreground="White" >
    <TextBlock.Style>
        <Style TargetType="TextBlock"  >
            <Style.Resources>
                <Storyboard x:Key="animate">
                    <ColorAnimationUsingKeyFrames Duration="0:0:2" Storyboard.TargetProperty="Background.Color" >
                        <SplineColorKeyFrame Value="#A933FF"/>
                        <SplineColorKeyFrame Value="White" KeyTime="0:0:1"/>
                    </ColorAnimationUsingKeyFrames>
                </Storyboard>
            </Style.Resources>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Binding.TargetUpdated">
                    <StopStoryboard BeginStoryboardName="beginAnimate"/>
                    <BeginStoryboard x:Name="beginAnimate" Storyboard="{StaticResource animate}"/>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </TextBlock.Style>
</TextBlock>